Навигация по ящикам и вкладкам отображается в React-Native - PullRequest
0 голосов
/ 03 ноября 2018

Я пытаюсь создать 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

Спасибо за вашу помощь!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...