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

时间:2020-05-28 16:51:01

标签: react-native react-navigation react-navigation-v5

想要为页眉添加按钮,因此当转到“个人资料”时,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'始终为空

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>


0 个答案:

没有答案