React Native Navigation Export по выбранной странице

Сначала я определил createStackNavigator на странице APP.js.

const MainNavigator=createStackNavigator({
 Home: {
  screen: HomePage,
  navigationOptions:{
  header:null }},
SignUpPages:{
  screen:SignUpPages,
  navigationOptions:{
  header:null } },
ProfilePages: {screen: ProfilePages,navigationOptions:{title:'Test Project',headerLeft:null,headerStyle: { backgroundColor: '#004f9e'},headerTitleStyle: { color: 'white',textAlign: 'center',flex: 1}}}});

Затем я определяю createBottomTabNavigator для других страниц.

const BottomNavigator=createBottomTabNavigator({
      ProfilePages: {
      screen: ProfilePages,
      navigationOptions:{
      title:'Profile Pages',
      headerLeft:null,
      headerStyle: { backgroundColor: '#004f9e'},
      headerTitleStyle: { color: 'white',textAlign: 'center',flex: 1, },
      }
  },

  PlatePages: {
      screen: PlatePages,
      navigationOptions:{
      title:'Hafriyat Plate Pages',
      headerLeft:null,
      headerStyle: { backgroundColor: '#004f9e'},
      headerTitleStyle: { color: 'white',textAlign: 'center',flex: 1, },
      }
  },

  QueryPages: {
      screen: QueryPages,
      navigationOptions:{
      title:'Query Pages',
      headerLeft:null,
      headerStyle: { backgroundColor: '#004f9e'},
      headerTitleStyle: { color: 'white',textAlign: 'center',flex: 1, },
      }
  }
})

При открытии первого проекта должна быть открыта страница входа и доступна страница регистрации. Если вы вошли в систему, перейдите на страницу профиля, и на этой странице должен быть открыт createBottomTabNavigator.

Я могу экспортировать только один навигатор с одной страницы. С этой страницы я думал экспортировать данные с помощью this.props.state, а затем экспортировать данные в соответствии с данными. Как я могу это сделать?

const App=createAppContainer(MainNavigator);
const App2=createAppContainer(BottomNavigator)

if (this.props.valMenu=='Main'){
export default App

}
else if (this.props.valMenu=='Bottom'){
export default App2
}

javascript react-native

18.02.2019 10:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я бы предложил что-то другое, не уверен, что это правильный способ сделать это, но это работает для меня.

Я бы порекомендовал вам добавить функцию, чтобы узнать, вошел ли пользователь в систему или нет, а затем на основе этого вы можете направить пользователя на разные экраны, которые у вас есть. Из фрагмента кода, который вы дали, это будет выглядеть примерно так:

const NotLoggedNavigator=createStackNavigator({
  SignUpPages:{
    screen:SignUpPages,
    navigationOptions:{
      header:null 
    } 
  }
});

const BottomNavigator=createBottomTabNavigator({
  ...
});

const MainNavigator=createStackNavigator({
  Home: { screen: HomePage },
  NotLoggedStack: { screen: NotLoggedNavigator },
  LoggedStack: { screen: BottomNavigator },
}, {
  initialRouteName: 'Home',
  headerMode: 'null',
});

const AppContainer = createAppContainer(MainNavigator);

При этом вы экспортируете только один appContainer. Затем, когда ваше приложение запускается, вы проверяете, вошел ли пользователь в систему или нет, и соответственно маршрутизируете, что-то вроде этого:

if (user.isSignedUp) {
  navigation.dispatch(StackActions.reset(
    { index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'NotLoggedStack' })] }
  ))
} else {
  navigation.dispatch(StackActions.reset(
    { index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'LoggedStack' })] }
  ))
}

Я не тестировал код, но я думаю, что это чистый способ маршрутизации к разным стекам, независимо от того, вошел пользователь в систему или нет, надеюсь, это поможет.

Это то, что я хочу сделать, но у этого есть недостаток. createBottomTabNavigator не получает свойства заголовков объектов. Есть ли способ получить эти функции?

— 18.02.2019 16:16

лучший способ, который я нашел для настройки заголовка, — это использовать компонент Header с помощью react-native-elements, очень простой в использовании и настройке. Просто добавьте «header: null» в stackNavigators и добавьте компонент на каждый экран.

— 18.02.2019 17:22

18.02.2019 12:40