Question

我正在尝试创建一个StackNavigation（登录，注册），然后根据在线教程将其重定向到DrawerNavigation和TabNavigation。我无法弄清楚自己在做什么错...我是ReactNative的新手，因此，如果我问一个基本问题，请不要打扰。

错误是： 您应仅在应用程序中的导航器上显式呈现，而其他导航器应通过将其包含在该导航器中来呈现。

我非常确定这是因为我渲染了一个组件（在我的 App.js 中带有导航器），然后又重新渲染了另一个组件（在我的 HomeScreenTabNavigator中带有导航器）。 .js ）。

App.js

export default class App extends React.Component {
  render() {
    return <AppStackNavigator />;
  }
}

const AppStackNavigator = createStackNavigator(
  {
    WelcomeScreen: { screen: WelcomeScreen },
    LoginScreen: { screen: LoginScreen },
    SignUpScreen: { screen: SignUpScreen },
    DrawerNavigator: {
      screen: DrawerNavigator,
      navigationOptions: {
        header: null
      }
    }
  },
  {
    navigationOptions: {
      /* Make sure that our DrawerNavigator is shown on HomeScreen and avoid previous screen */
      gesturesEnabled: false
    }
  }
};

DrawerNavigator.js

const InnerStackNavigator = createStackNavigator({
  TabNavigator: { screen: HomeScreenTabNavigator }
});

export default (AppDrawerNavigator = createDrawerNavigator({
  HomeScreen: { screen: InnerStackNavigator }
}));

HomeScreenTabNavigator.js

export default class AppTabNavigator extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerLeft: (
        <View style={{ padding: 10 }}>
          <Text onPress={() => navigation.openDrawer()}>Open</Text>
        </View>
      )
    };
  };

  render() {
    return (
      <HomeScreenTabNavigator
        screenProps={{ navigation: this.props.navigation }}
      />
    );
  }
}

const HomeScreenTabNavigator = createBottomTabNavigator({
  ScreenOne: {
    screen: ScreenOne,
    navigationOptions: {
      tabBarLabel: "feed"
    }
  },
  ScreenTwo: {
    screen: ScreenTwo,
    navigationOptions: {
      tabBarLabel: "feed"
    }
  }
});

我要遵循的教程的完整存储库就在这里：https://github.com/nathvarun/React-Navigation-Perfect-Boilerplate-Structure

谢谢您的帮助！

抽屉和标签导航在React-Native中呈现

0 个答案: