从父级导航到特定的嵌套导航器路径

Question

想为页眉添加按钮，因此当转到“个人资料”时，TAB不会关闭。为Tab导航器添加了屏幕“配置文件”（但隐藏TabBar）。

如何在ReactNavigation v5中将嵌套的导航器传递给Parent？因此，我可以使用嵌套导航器的“导航”。当前无法使用，因为Stack导航器仅了解“登录”和“本地”路由。

export default class RootTabs extends Component {

    render() {

        return (
            <Stack.Navigator>
                <Stack.Screen
                    name="Login"
                    component={LoginView}
                    options={{ headerShown: false }} />
                <Stack.Screen
                    name="Home"
                    component={HomeTabs}
                    options={{ headerShown: false }}
                    options={({ route, navigation }) => ({
                        headerTitle: getHeaderTitle(route),
                        headerRight: () => (
                            <Button onPress={() = > navigation.navigate('Profile')} title="Profile" />
                        ),
                        headerLeft: null
                    })}>
                </Stack.Screen>
            </Stack.Navigator>
        )
    }
}

找到了最接近的正确解决方案，但是它不起作用，因为'this.navigator'始终为null

export default class RootTabs extends Component {
    gotoprofile = () => {
        this.navigator && this.navigator.navigation.navigate('Login')
    }
    render() {

        return (
            <Stack.Navigator>
                <Stack.Screen
                    name="Login"
                    component={LoginView}
                    options={{ headerShown: false }} />
                <Stack.Screen ref={nav => this.navigator = nav}
                    name="Home"
                    component={HomeTabs}
                    options={{ headerShown: false }}
                    options={({ route, navigation }) => ({
                        headerTitle: getHeaderTitle(route),
                        headerRight: () => (
                            <Button onPress={this.gotoprofile} title="Profile" />
                        ),
                        headerLeft: null
                    })}>
                </Stack.Screen>
            </Stack.Navigator>
        )
    }
}

这是我的标签浏览器

<Tab.Navigator
   initialRouteName="News"
   tabBarOptions={{
     activeTintColor: '#2f4f4f',
   }}
   tabBar={props =>
     <BottomTabBar
       {...props}
       state={{ ...props.state, routes: props.state.routes.slice(0, 5) }}>
     </BottomTabBar>
   }>
     <Tab.Screen
         name="News"
         component={NewsView}/>
     <Tab.Screen
         name="Finance"
         component={FinanceView}/>
     <Tab.Screen
         name="Security"
         component={SecurityView}/>
     <Tab.Screen
         name="Services"
         component={ServicesView}/>
     <Tab.Screen
         name="Ideas"
         component={IdeasView}/>
     <Tab.Screen
         name="Profile"
         component={ProfileView}/>
</Tab.Navigator>

Answer 1

我认为是您的问题，因为您没有将任何属性导航传递给此功能。如果您考虑嵌套导航，则可以在此链接https://reactnavigation.org/docs/nesting-navigators/中学习。如果您需要示例，请尝试在此链接https://github.com/anhdevit/react-native-base-project

export default class RootTabs extends Component {
    gotoprofile = (navigation) => {
        navigation.navigate('Login')
    }
    render() {

        return (
            <Stack.Navigator>
                <Stack.Screen
                    name="Login"
                    component={LoginView}
                    options={{ headerShown: false }} />
                <Stack.Screen ref={nav => this.navigator = nav}
                    name="Home"
                    component={HomeTabs}
                    options={{ headerShown: false }}
                    options={({ route, navigation }) => ({
                        headerTitle: getHeaderTitle(route),
                        headerRight: () => (
                            <Button onPress={() => this.gotoprofile(navigation)} title="Profile" />
                        ),
                        headerLeft: null
                    })}>
                </Stack.Screen>
            </Stack.Navigator>
        )
    }
}