Как преобразовать одноэкранное приложение в приложение на основе вкладок с помощью react-native-navigation?

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

В приложении есть страница входа без вкладок. (очень похоже на страницу входа в facebook) (Ссылка на изображение - Изображение просто для того, чтобы дать представление. Изображение Предоставлено - Google После входа пользователя в систему я хочу преобразовать его в приложение на основе вкладок, и мне нужны разные стеки навигации для обеих вкладок (как это происходит в таких приложениях, как Quora) (Изображение ref - Снова изображение - это просто ссылка)

Я использую mobx для управления государством.

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

  1. обеспечивают реакцию на переменную входа пользователя и переход от одноэкранного приложения к приложению на основе вкладок. (Единственная проблема - отсутствие анимации при реакции на isLoggedIn) Например, - App.js

    constructor() {
reaction(() => auth.isLoggedIn, () => app.navigateToHome())
reaction(() => app.root, () => this.startApp(app.root));
app.appInitialized();

    }

    startApp(root){
    switch (root) {
      case 'user.login':
        Navigation.startTabBasedApp({
          tabs: [
            {
              label: 'One',
              screen: 'user.login',
              icon: require('./assets/one.png'),
              selectedIcon: require('./assets/one_selected.png'),
              navigatorStyle: {},
            }
          ]
          screen: {
            screen: root,
            title: 'Login',
            navigatorStyle: {
              screenBackgroundColor: colors.BACKGROUND,
              statusBarColor: colors.BACKGROUND
            },
            navigatorButtons: {}
          }
        })
        return ;
      case 'user.home':
        Navigation.startTabBasedApp({
          tabs: [
            {
              label: 'One',
              screen: 'user.home',
              icon: require('./assets/one.png'),
              selectedIcon: require('./assets/one_selected.png'),
              navigatorStyle: {},
            },
            {
              label: 'Two',
              screen: 'user.home',
              icon: require('./assets/two.png'),
              selectedIcon: require('./assets/two_selected.png'),
              title: 'Screen Two',
              navigatorStyle: {},
            }
          ],
          animationType: 'slide-down',
        });
      return;
      default:
          console.error('Unknown app root');
    }
  }

  2. Используйте одноэкранное приложение, но используйте вкладки на главном экране. С помощью этого метода мне пришлось бы самому реализовать другой стек навигации для обеих вкладок. (response-native-navigation уже реализует это. Так что не беспокойтесь в методе 1 о стеке навигации)

Например - App.js

Navigation.startSingleScreenApp({
          screen: {
            screen: root,
            title: 'Login',
            navigatorStyle: {
              screenBackgroundColor: colors.BACKGROUND,
              statusBarColor: colors.BACKGROUND
            },
            navigatorButtons: {}
          }
        })

Home.js

<Tabs>
        <Tab
          titleStyle={{fontWeight: 'bold', fontSize: 10}}
          selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
          selected={true}
          renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='whatshot' size={33} />}
          renderSelectedIcon={() => <Icon color={'#6296f9'} name='whatshot' size={30} />}
          >
          <Feed />
        </Tab>
        <Tab
          titleStyle={{fontWeight: 'bold', fontSize: 10}}
          selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
          selected={selectedTab === 'profile'}
          title={selectedTab === 'profile' ? 'PROFILE' : null}
          renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='person' size={33} />}
          renderSelectedIcon={() => <Icon color={'#6296f9'} name='person' size={30} />}
          onPress={() => this.changeTab('profile')}>
          <Profile />
        </Tab>
      </Tabs>

Каковы лучшие практики управления вкладками в react-native? И в моем случае использования, какой метод я должен использовать?


react-native react-native-navigation mobx mobx-react
person Ashish Dulhani    schedule 04.05.2017    source источник
comment
У меня такая же проблема - удалось куда-нибудь добраться?   -  person JamesG    schedule 27.06.2017
comment
У меня такая же проблема - удалось найти решение?   -  person Antonio Brandao    schedule 20.03.2018

Ответы (2)


arrow_upward
0
arrow_downward

Чтобы получить верхние вкладки, вам нужно будет запустить одноэкранное приложение, а затем определить верхние вкладки. Вы можете сделать что-то подобное ниже.

    Navigation.startSingleScreenApp({
     screen: 'FirstScreen'
     title: 'FirstScreenTitle'
     topTabs: [
       {
         screen:'FirstTabScreen'
       },
       {
         screen:'SecondTabScreen'
       }
     ]

    });

Сначала зарегистрируйте каждую вкладку как отдельный экран.

person Aritra Dattagupta    schedule 27.07.2017

arrow_upward
0
arrow_downward

Рекомендуемый подход - начать с Navigation.startSingleScreenApp() и затем перейти к Navigation.startTabBasedApp() (вариант 1).

Единственная проблема, с которой вы столкнулись, заключается в том, что в Варианте 1 нет анимации, но на самом деле у вас есть такая возможность: Добавьте анимацию перехода к новому объекту навигатора:

Navigation.startTabBasedApp({
  // ...
  animationType: 'slide' // optional, add transition animation to root change: 'none', 'slide-down', 'fade'
})

Найдите свойство animationType в документации, как в startSingleScreenApp и startTabBasedApp .

person Antonio Brandao    schedule 23.03.2018