将参数传递给选项卡导航器 React Navigation 5

Question

我正在使用 materialTopTabs，这似乎会在安装后加载导航器中的所有屏幕。我有一个屏幕 List，里面有一个带有 2 个屏幕的选项卡导航器：Posts 和 Users。这两个屏幕都依赖于从 List 传递的参数。但是，我只能使用这种方法将参数传递给其中一个屏幕：

navigation.navigate('PostsTabNav', {
  params: {
    network: item,
  },
  screen: 'NetworkPosts' //or NetworkUsers
});

我试图通过这样做直接将参数传递给我的导航器：

navigation.navigate('PostsTabNav', {
  network: item
});

第一个选项只允许我传递到一个屏幕。第二个选项允许我像这样访问导航器中的参数：

const PostsTabNav = createMaterialTopTabNavigator();
const PostsMainNav = (props) => {
    const temp = props.route.params.network; //params here

    return (
        <PostsTabNav.Navigator>
            <PostsTabNav.Screen name="NetworkPosts" component={NetworkPostsScreen} />
            <PostsTabNav.Screen name="NetworkUsers" component={NetworkUsersScreen} />
        </PostsTabNav.Navigator>
    );
};

有没有办法将 temp 传递到我的两个屏幕？如果没有，有没有更好的方法来处理这种情况？

这是 StackNavigator

的代码

const NetworkListStackNav = createStackNavigator();
export const NetworksListNavigator = () => {
    return (
        <NetworkListStackNav.Navigator>
            <NetworkListStackNav.Screen name="List" component={ListScreen} />
            <NetworkListStackNav.Screen name="PostsTabNav" component={PostsMainNav} />
        </NetworkListStackNav.Navigator>
    );
};

Answer 1

将参数传递给导航器，然后使用 React Context 将其暴露给选项卡。

在单独的文件中创建上下文，您可以在导航器和屏幕中导入该文件：

export const NetworkContext = React.createContext();

然后在上下文中提供参数：

const PostsTabNav = createMaterialTopTabNavigator();

const PostsMainNav = ({ route }) => {
  return (
    <NetworkContext.Provider value={route.params.network}>
      <PostsTabNav.Navigator>
        <PostsTabNav.Screen name="NetworkPosts" component={NetworkPostsScreen} />
        <PostsTabNav.Screen name="NetworkUsers" component={NetworkUsersScreen} />
      </PostsTabNav.Navigator>
    </NetworkContext.Provider>
  );
};

在您的屏幕组件中，使用上下文：

const network = React.useContext(NetworkContext);

另见 https://reactnavigation.org/docs/hello-react-navigation#passing-additional-props

Answer 2

您可以为屏幕设置初始参数。

const PostsTabNav = createMaterialTopTabNavigator();
const PostsMainNav = (props) => {
    const temp = props.route.params.network
    return (
        <PostsTabNav.Navigator>
            <PostsTabNav.Screen name="NetworkPosts" component={NetworkPostsScreen} initialParams={network:temp}/>
            <PostsTabNav.Screen name="NetworkUsers" component={NetworkUsersScreen} initialParams={network:temp}/>
        </PostsTabNav.Navigator>
    );
};

Answer 3

const Stack = createStackNavigator();
function AppNavigator(props) {
    const { cartCount } = props;
    return (
        <NavigationContainer>
              <Stack.Screen {...props} name="MainScreen" component={() => <MyTabs cartCounts={cartCount}></MyTabs>} options={{ headerShown: false }} countProp={cartCount} initialParams={{ 'count': cartCount }} />
             </Stack.Navigator>
        </NavigationContainer>
    )
}

function mapStateToProps(state) {
    return {
        cartCount: state.cart.cartCount,
    }
}

export default connect(mapStateToProps, {})(AppNavigator);

你的标签组件就像

function MyTabs(props) {
let cartCount = props.cartCounts;
return (
    <BottomTab.Navigator
        screenOptions={{
            tabBarStyle: { position: 'absolute' },
            tabBarStyle: styles.tabbarStyle
        }}>
        <BottomTab.Screen name="CartScreen" component={CartScreen} options={{ headerShown: false }}
            options={{
                headerShown: false,
                tabBarIcon: ({ focused, tintColor }) => (
                    <View style={styles.cartIconView}>
                        <Image
                            square
                            source={bottomCart}
                           
                        />
                        <Badge style={[GlobalStyles.badge, styles.count, {
                        }]}>
                            <Text style={[GlobalStyles.badgeText, styles.countText]}>{cartCount}</Text>
                        </Badge>
                    </View>
                ),
            }} />
    
    </BottomTab.Navigator >
);

将参数传递给选项卡导航器 React Navigation 5

Passing params to tab navigator React Navigation 5

reactjs

react-native

react-navigation

react-navigation-bottom-tab

react-navigation-v5