【问题标题】：Navigate to component screen in parent stack from child stack从子堆栈导航到父堆栈中的组件屏幕
【发布时间】：2021-12-18 22:11:23
【问题描述】：

我正在尝试从我的 topTab 导航导航到 Stack Navigation 上的某个屏幕，但找不到解决方法。我尝试使用 navigation.getParent() 但它抛出了这个错误TypeError: undefined is not an object (evaluating 'navigation.getParent().navigate')

这是我正确解释的代码：

        <Stack.Navigator
            screenOptions={{
                headerShown: false,
            }}
        >
            <Stack.Screen name="interests" component={Interests} />
            <Stack.Screen name="importSubscriptions" component={ImportSubscriptions} />
            <Stack.Screen name="subscriptions" component={Subscriptions} />
            <Stack.Screen name="bottomTab" component={MainBottomTab} />
            <Stack.Screen name="podcastItem" component={PodcastItemCard}/>
            <Stack.Screen name="player" component={Player} />
            <Stack.Screen name="tabNavigator" component={UsersInterestTab} />

        </Stack.Navigator>

 <Tab.Navigator
                initialRouteName="Feed"
                initialLayout={{ width: Dimensions.get('window').width }}
                screenOptions={{
                    tabBarActiveTintColor: Colors.white,
                    tabBarInactiveTintColor: Colors.gray_2,
                    activeBackgroundColor: Colors.blue_primary,
                    tabBarScrollEnabled: true,
                    headerShown: false,
                    tabBarIndicatorStyle: {
                        width: 0,
                        height: 0,
                        elevation: 0,

                    },
                    tabBarItemStyle: { alignItems: 'center', },
                    tabBarLabelStyle: { margin: 0, fontSize: fontSize.xsmall, fontFamily: fontFamily.EuclidCircularARegular, color: Colors.gray_2 },
                    tabBarStyle: {
                        backgroundColor: Colors.white,
                        padding: 0,
                        elevation: 0,   // for Android
                        shadowOffset: {
                            width: 0,
                            height: 0 // for iOS
                        },
                        width: '100%'

                    }
                }}
            >
                <Tab.Screen
                    name={'For you'}
                    component={DiscoverContent}
                    initialParams={{ id: 177 }}
                    options={{
                        tabBarLabel: ({ color, focused }) => (
                            <Text style={[styles.label, { color: color, backgroundColor: focused ? Colors.blue_primary : Colors.white }]}>For you</Text>
                        ),
                    }}
                />
                
                {
                    usersInterests.map((item) => (
                        <Tab.Screen
                            key={item.id}
                            name={item.name}
                            component={DiscoverContent}
                            initialParams={{ id: item.id }}
                            options={{
                                tabBarLabel: ({ color, focused }) => (
                                    <Text style={[styles.label, { color: color, backgroundColor: focused ? Colors.blue_primary : Colors.white }]}>{item.name}</Text>
                                ),
                            }}
                        />
                    ))
                }
            </Tab.Navigator>

我正在尝试从 tabNavigator 屏幕访问播放器组件。我该怎么办？

【问题讨论】：

可以添加 TabStack 吗？在你的例子中我只有一个堆栈
嗨，我刚刚做了。

标签： react-native stack-navigator react-navigation-v6 react-navigation-top-tabs

【解决方案1】：

你可以使用 useNavigation()

参考：-https://reactnavigation.org/docs/use-navigation/

从'@react-navigation/native'导入{ useNavigation}；

    useNavigation().goBack();

【讨论】：

【解决方案2】：

问题基本上是我的导航结构。我在没有将每个 Navigator 包装在单独的 NavigationaContainer 中（同时传递 Independent 道具）的情况下重组了导航，并且它起作用了。

【讨论】：

【解决方案3】：

你能试试useNavigation钩子吗？它完美地在我身边工作

用法

import {useNavigation} from '@react-navigation/native';


const navigation = useNavigation();

navigation.navigate("interests");
//or
navigation.push("interests");

【讨论】：