Не может перейти на дочерние экраны

Question

Мое начальное имя_RouteName loginScreen .

После входа Второй экран появился с BottamTabNavigation . BottomTab содержит 4 экрана и один из экранов с именами от GroupScreen go до TopTabScren . Я не могу перейти к этому экрану.

Поток -> loginScreen -> BottomTabScreen -> TopTabScreen.

Я не могу перейти к TopTabScreen. Выдает ошибку

" undefined не является объектом (оценка 'this.props.navigation.navigate' ".

TopTabScreen ведет к дальнейшему 4 экрана

Но когда я устанавливаю InitailRoutName = "TobTabScreen", то все четыре экрана работают с этим.

Для экранов навигации я использую это.

onPress={() => this.props.navigation.navigate('screenName')}.  

Answer 1

Судя по всему, вы понимаете, как работает навигация! в подкомпонентной системе реагирующего нативного приложения.

Если при создании объекта компонент обернут как экран в объект навигатора, он будет иметь прямой доступ к объекту навигации!

но если у вас есть подкомпонент, который находится внутри рендера компонента, и это не экран (наверняка), то вам придется вручную передавать навигацию в качестве опоры!

Что, на мой взгляд, совсем не подходит! но в вашем случае это будет работать

ПРИМЕЧАНИЕ: ЕСЛИ Я ПРАВИЛЬНО ПОСТАВИЛ ВАШ КОД СУБКОМПОНЕНТОВ! И Я ПОМОЖУ ПОКАЗАТЬ ПРИМЕР

Answer 2

Получить нижнюю часть панели вкладок Навигационные реквизиты

_getScreenProps = () => {
    return (
        {
            navigation: this.props.navigation,
        }
    )
}

Визуализация панели вкладок

render() {
    return (
       <View style={{ flex: 1.0 }}>
            <Stack screenProps={this._getScreenProps()} />
        </View>
    )
}

На экране вкладки используйте навигацию следующим образом

onPress={() => this.props.screenProps.navigation.navigate('screenName')}.  

Панель вкладок

const TabView = createBottomTabNavigator({
    Home: {
        screen: Home,
    },
    Contacts: {
        screen: Contacts,
    },
    Group: {
        screen: Group,
    },
    Task: {
        screen: Task,
    },
    Event: {
        screen: EventView
    }
},
    {
        defaultNavigationOptions: ({ navigation }) => ({
            defaultProps: navigation,
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
                const { routeName } = navigation.state;
                let iconName;
                let title = ''
                if (routeName === 'Home') {
                    iconName = 'ic_home'
                    title = "HOME"
                } else if (routeName === 'Contacts') {
                    iconName = 'ic_user_home'
                    title = "CONTACTS"
                } else if (routeName === 'Group') {
                    iconName = 'ic_group'
                    title = "PROSPECTS"
                } else if (routeName === 'Task') {
                    iconName = 'ic_document'
                    title = "TASKS"
                } else if (routeName === 'Event') {
                    iconName = 'ic_calculator'
                    title = "EVENTS"
                }


                if (focused) {
                    return (
                        <LinearGradient style={{ flex: 1.0, width: '100%' }}
                            colors={[Constant.COLOR.grediantTop, Constant.COLOR.grediantBottom]}>
                            <View style={{ flex: 1.0, justifyContent: 'center' }}>
                                <Image
                                    style={{
                                        height: 25,
                                        width: 25,
                                        tintColor: 'white',
                                        alignSelf: 'center'
                                    }}
                                    tintColor='white'
                                    source={{ uri: iconName }}
                                    resizeMode='contain' />
                                <SPText
                                    style={{ alignSelf: 'center', marginTop: 2, textAlign: 'center' }}
                                    fontSize={8}
                                    textColor='white'
                                    text={title} />
                            </View>
                        </LinearGradient>
                    )
                }
                else {
                    return (
                        <View style={{ flex: 1.0, justifyContent: 'center' }}>
                            <Image
                                style={{
                                    height: 25,
                                    width: 25,
                                    alignSelf: 'center'
                                }}
                                source={{ uri: iconName }}
                                resizeMode='contain' />
                            <SPText
                                style={{ alignSelf: 'center', marginTop: 2 }}
                                fontSize={8}
                                textColor='gray'
                                text={title} />
                        </View>
                    )
                }


            },
            tabBarOnPress: () => {
                const { routeName } = navigation.state;
                navigation.navigate(routeName)
            },

        }),
        tabBarOptions: {
            showLabel: false,
            inactiveTintColor: 'gray',
            inactiveBackgroundColor: 'white',
        },
    })


const RootStack = createStackNavigator(
    {
        TabView: {
            screen: TabView,
        },
    },
    {
        mode: 'modal',
        headerMode: 'none',
    }
);


const Stack = createAppContainer(RootStack);