Перейдите к указанному c маршруту вложенного навигатора от родителя - PullRequest
Новая
       4

Перейдите к указанному c маршруту вложенного навигатора от родителя

0 голосов
/ 28 мая 2020

Хотел добавить кнопку для заголовка, чтобы при go профиле вкладки не закрывались. Добавлен экран «Профиль» для навигатора вкладок (но скрывает панель вкладок).

Как передать мой вложенный навигатор родительскому элементу в ReactNavigation v5? Так что я мог использовать «навигацию» по вложенному навигатору. В настоящее время не работает, потому что навигатор стека знает только о маршрутах «Вход» и «Домой». 

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 

<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>
...