帶有反應導航參考的navigation.getParam

Question

我有一個帶有 profileImage 組件的 post 組件，該組件包含一個名為 userHandle 的道具。 從 post 組件中，userHandle 一直向下傳遞到 profileImage。 當我單擊帖子組件中的個人資料圖像時，我會引用導航堆棧，因為這些帖子組件無處不在。 這是根導航文件：

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') 多種方式，但我一直認為這不是 function。 我已經嘗試過 this.props.navigation.getParam，嘗試過 RootNavigation.getParam 和其他人，但沒有運氣。 我只需要傳遞 userHandle，因為我需要使用 componentDidMount 在與該 userHandle 關聯的 SingleProfileScreen 上加載數據。 任何幫助表示贊賞！

Answer 1

嘗試使用反應上下文 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>

你可以閱讀更多反應上下文 API反應上下文

Answer 2

想通了，我所要做的就是打電話

const { userHandle } = this.props.route.params;

在 singleProfileScreen 的 componentDidMount() function 中，它可以工作