React native 无法导航到子屏幕

我的初始RouteName是登录屏幕

登录后，第二个屏幕出现了BottamTabNavigation。底部选项卡包含4个屏幕，其中一个屏幕名为GroupScreen转到TopTabScren。我无法导航到此屏幕

流程为-->登录屏幕-->底部选项卡屏幕-->顶部选项卡屏幕

我无法导航到TopTabScreen。这是错误的

“未定义不是一个 对象（评估'this.props.navigation.navigate'”

TopTab屏幕导线连接到另外4个屏幕

但是当我设置InitailRoutName=“TobTabScreen”时，所有四个屏幕都可以使用它

对于导航屏幕，我使用这个

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

---

获取Bottom Tabbar屏幕导航道具

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

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

渲染选项卡栏

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

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

选项卡栏

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);

const TabView=createBottomTabNavigator({
主页：{
屏幕：主页，
},
联系人：{
屏幕：联系人，
},
组：{
屏幕：组，
},
任务：{
屏幕：任务，
},
活动：{
屏幕：EventView
}
},
{
defaultNavigationOptions:（{navigation}）=>({
默认道具：导航，
tabBarIcon:（{聚焦、水平、着色}）=>{
const{routeName}=navigation.state；
让我来；
让title=''
如果（routeName==='Home'）{
iconName='ic_home'
title=“主页”
}else if（routeName==='Contacts'）{
iconName='ic\U用户\U主页'
title=“联系人”
}else if（routeName=='Group'）{
iconName='ic_组'
title=“潜在客户”
}else if（routeName=='Task'）{
iconName='ic_文档'
title=“任务”
}else if（routeName==='Event'）{
iconName='ic_计算器'
title=“事件”
}
如果（聚焦）{
返回(
)
}
否则{
返回(
)
}
},
tabBarOnPress:（）=>{
const{routeName}=navigation.state；
导航。导航（routeName）
},
}),
选项卡选项：{
showLabel:false，
颜色：“灰色”，
inactiveBackgroundColor:'白色'，
},
})
const RootStack=createStackNavigator(
{
选项卡视图：{
屏幕：选项卡视图，
},
},
{
模式：“模态”，
headerMode:“无”，
}
);
const Stack=createAppContainer（RootStack）；

从外观上看，您误解了react native应用程序的子组件系统中导航的工作原理

如果组件在创建时被包装为navigator对象中的屏幕，则可以直接访问navigation prop

但是，如果您有子组件，它位于组件的渲染内部，并且它不是屏幕（当然），那么您必须手动将导航作为道具传递给它

在我看来，这根本不是一个好方法！但在你的情况下，它会起作用的

注意：如果我是正确的张贴您的子组件代码！我会 帮助显示示例

---

分享您迄今为止所做的工作的代码示例，显示nav堆栈中的容器组件，即您尝试从中访问导航的子组件！