我在 React-native
app中使用 React-navigation
的SwitchNavigator进行身份验证 . 在授权部分,我想显示一个侧面抽屉,用于显示设置和注销等选项 . 通过单击选项卡部分中的按钮进入授权部分,用户应该可以转到相册的详细信息部分 . 为此,我正在使用StackNavigator .
问题:验证后,一旦我导航到带有侧面抽屉的部分,其中存在堆栈导航器,一旦导航到授权部分,就不会呈现任何内容 . 即使安装了测试屏幕(通过componentDidMount检查)也不会显示任何内容 .
const Stages = createMaterialTopTabNavigator({
testStage1: { screen: TestScreen },
testStage2: { screen: TestScreen },
testStage3: { screen: TestScreen },
testStage4: { screen: TestScreen },
})
const AuthorizedSectionRouteConf={
navigation:{
stages: {
screen : Stages,
},
details : {
screen: DetailsScreen,
}
},
navigationOptions:{
headerLeft:null
}
}
const AuthorizedSectionNavigator =
createStackNavigator(AuthorizedSectionRouteConf.navigation);
const Config = {
navigation: {
UnauthorizedSection: {
screen: ({navigation}) => <LoginScreen navigate={navigation.navigate}/>,
navigationOptions:{
header:null,
mode:'modal'
}
},
AuthorizedSection: {
screen: createDrawerNavigator({
Home:{
screen: ({navigation}) => <AuthorizedSectionNavigator screenProps={{drawerNavigator:navigation}} />
}
})
},
TestSection: TestScreen
}
}
export default AppNavigator = createSwitchNavigator(Config.navigation);
导航后导航:
this.props.navigate('AuthorizedSection')
==> nothing is visible after this.
但是,如果我在身份验证后导航到TestScreen,这是屏幕上的简单文本,它会正确呈现 .
this.props.navigate('TestSection')
==> working properly
1 回答
弄清楚组件没有空间可以渲染 . 通过设置父容器的flex属性来修复它 .