Question

我正在使用React-navigation应用中来自React-native的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

Answer 1

发现没有足够的空间来渲染组件。通过设置父容器的flex属性对其进行了修复。

在react-native中导航后没有呈现任何内容

1 个答案: