如何解决带有react导航参考的navigation.getParam
我有一个带有profileImage组件的post组件,其中包含一个名为userHandle的道具。从post组件将userHandle一直传递到profileImage。当我单击post组件中的个人资料图像时,我会引用导航堆栈,因为这些post组件无处不在。这是rootNavigation文件:
import * as React from 'react';
import { StackActions } from '@react-navigation/native';
export const navigationRef: any = React.createRef();
export function navigate(name: any,params: any) {
navigationRef.current?.navigate(name,params);
}
export function getParam(name: any,defaultData: any) {
navigationRef.current?.getParam(name,defaultData);
}
export function push(name: any,params: any) {
navigationRef.current?.dispatch(StackActions.push(name,params));
}
然后这是所有屏幕都已连接的导航堆栈文件:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';
import { createStackNavigator } from '@react-navigation/stack';
import { Image } from 'react-native';
import { Icon } from 'react-native-elements';
import HomeTabs from './HomeTabs';
import CommentsScreen from '../PushScreens/CommentsScreen';
import SingleProfileScreen from '../PushScreens/SingleProfileScreen';
const HomeStack = createStackNavigator();
class HomeStackScreen extends React.Component {
render() {
return (
<NavigationContainer ref={navigationRef}>
<HomeStack.Navigator
initialRouteName='Home'
mode='modal'
screenOptions={{
headerStyle: {
shadowColor: 'transparent'
},}}
>
<HomeStack.Screen name="Home" component={HomeTabs} options={{headerShown:false}}/>
<HomeStack.Screen name="CommentsScreen" component={CommentsScreen}
options={{
headerTitle:'Discussions',headerBackImage: () => (
<Icon
style={{marginLeft: 20}}
name='arrow-down'
type='material-community'
color='#000000'
size={30}
/>
),headerBackTitleVisible: false
}}
/>
<HomeStack.Screen name="SingleProfileScreen" component={SingleProfileScreen}
options={{
headerTitle:'',headerBackImage: () => (
<Icon
style={{marginLeft: 20}}
name='arrow-down'
type='material-community'
color='#000000'
size={30}
/>
),headerBackTitleVisible: false
}}
/>
</HomeStack.Navigator>
</NavigationContainer>
)
}
}
export default HomeStackScreen;
现在从任何地方,我都可以将RootNavigation导入为RootNavigation并调用:
RootNavigation.push('SingleProfileScreen',{userHandle: props.userHandle})}
它将把该屏幕推到任何堆栈的顶部。所以到目前为止一切都很好。唯一的问题是,当我尝试获取按下屏幕的数据userHandle时,我无法弄清楚如何在SingleProfileScreen上获取该数据。我尝试过:getParam('userHandle')多种方法,但我一直认为这不是一个函数。我已经尝试过this.props.navigation.getParam,尝试过RootNavigation.getParam,其他都没有运气。我只需要传递userHandle,因为我需要使用componentDidMount在与该userHandle关联的SingleProfileScreen上加载数据。任何帮助表示赞赏!
解决方法
尝试使用react context API
您可以将您的值传递到上下文API中,并使用以下命令在所有子屏幕中访问
this.context.userHandle
- 创建文件并使用此代码
import React,{Context} from 'react'
const userHandle=React.createContext()
export const userHandleProvider=userHandle.Provider
export const userHandleConsumer=userHandle.Consumer
- 将其导入到您的组件中
import {userHandleProvider} from 'YOUR PATH'
将导航容器包装在用户HandleProvider中
<UserHandleProvider value={"WHATEVER VALUE YOU WANT TO PASS"}
<NavigationContainer ref={navigationRef}>
<HomeStack.Navigator
initialRouteName='Home'
mode='modal'
screenOptions={{
headerStyle: {
shadowColor: 'transparent'
},}}
>
<HomeStack.Screen name="Home" component={HomeTabs} options={{headerShown:false}}/>
<HomeStack.Screen name="CommentsScreen" component={CommentsScreen}
options={{
headerTitle:'Discussions',headerBackImage: () => (
<Icon
style={{marginLeft: 20}}
name='arrow-down'
type='material-community'
color='#000000'
size={30}
/>
),headerBackTitleVisible: false
}}
/>
<HomeStack.Screen name="SingleProfileScreen" component={SingleProfileScreen}
options={{
headerTitle:'',headerBackImage: () => (
<Icon
style={{marginLeft: 20}}
name='arrow-down'
type='material-community'
color='#000000'
size={30}
/>
),headerBackTitleVisible: false
}}
/>
</HomeStack.Navigator>
</NavigationContainer>
</UserHandleProvider>
您可以阅读更多有关React context API的内容 React Context
,想通了,我要做的就是打电话
const { userHandle } = this.props.route.params;
在singleProfileScreen中的componentDidMount()函数中,并且有效
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。