我的初始RouteName是loginScreen。登录后,第二个屏幕带有BottamTabNavigation。 BottomTab包含4个屏幕,其中一个名为GroupScreen的屏幕转到TopTabScren。我无法导航到此屏幕。流是》 loginScreen》 BottomTabScreen》 TopTabScreen。我无法导航到TopTabScreen。它给出错误“ 未定义不是对象(正在评估'this.props.navigation.navigate'”)。TopTabScreen导致另外4个屏幕但是,当我设置InitailRoutName =“ TobTabScreen”时,所有四个屏幕都可以使用。
对于导航屏幕,我正在使用此。
onPress={() => this.props.navigation.navigate('screenName')}.
<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS94QlN5OS5qcGcifQ==” alt =“在此处输入图像描述”>
获取Botttom标签栏屏幕导航道具
_getScreenProps = () => {
return (
{
navigation: this.props.navigation,
}
)
}
Render Tabbar
render() {
return (
<View style={{ flex: 1.0 }}>
<Stack screenProps={this._getScreenProps()} />
</View>
)
}
在选项卡屏幕上,使用导航如下
onPress={() => this.props.screenProps.navigation.navigate('screenName')}.
Tabbar
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);