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

I am using SwitchNavigator from React-navigation for Authentication in React-native app. In the Authorized Section, I want to show a side Drawer for showing options like settings and log out. Entering into the Authorized section by clicking the button in tabs section user should be able to go to details section of an album. For that, I am using StackNavigator.

我在React-navigation中使用React-navigation中的SwitchNavigator进行身份验证。在授权部分，我想显示一个侧面抽屉，用于显示设置和注销等选项。通过单击选项卡部分中的按钮进入授权部分，用户应该可以转到相册的详细信息部分。为此，我正在使用StackNavigator。

Issue: After Authentication, Once I navigate to a section with Side Drawer in which stack navigator is present, nothing is rendered once navigated to Authorized section. Even the Test screen is mounted(checked through componentDidMount) nothing is displayed.

问题：在身份验证之后，一旦我导航到带有侧面抽屉的部分，其中存在堆栈导航器，一旦导航到授权部分，就不会呈现任何内容。即使安装了测试屏幕（通过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);

Navigation after navigation:

导航后导航：

this.props.navigate('AuthorizedSection')
==> nothing is visible after this.

However, If I navigate to TestScreen after Authentication which is simple text on screen it rendered properly.

但是，如果我在身份验证后导航到TestScreen，这是屏幕上的简单文本，它会正确呈现。

this.props.navigate('TestSection')
    ==> working properly

1 个解决方案

#1

Figured out that there is no space for the component to render. Fixed it by setting the flex property for the parent container.

弄清楚组件没有空间可以渲染。通过设置父容器的flex属性来修复它。