带有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（）函数中，并且有效