Как добавить createBottomTabNavigator на тот же экран с помощью createStackNavigator

На моем домашнем экране (я использовал App.js в качестве домашнего) у меня есть createStackNavigator с createAppContainer для сопоставления всех экранов с помощью React-Navigation. Это сработало, и я могу явно перейти на любой из этих экранов с любого экрана. Теперь я хочу добавить нижнюю панель навигации вкладок на главный экран с помощью createBottomTabNavigator.

Вот упрощенная версия моих кодов:

import { createStackNavigator, createAppContainer, createBottomTabNavigator  } from 'react-navigation';
import Screen1 from './Screens/Screen1';
import Screen2 from './Screens/Screen2';
import Screen3 from './Screens/Screen3';

class HomeScreen extends React.Component {
   render() {
      return (
         <View><Text>Welcome</Text></View>
      );
   }
 }

 const AppNavigator = createStackNavigator({
   Home: { screen: HomeScreen },
   Screen1: { screen: Screen1 },
   Screen2: { screen: Screen2 },
   Screen3: { screen: Screen3 },
 });

 export default createAppContainer(AppNavigator);

Я хочу добавить внизу панель навигации вот так:

const TabNavigator = createBottomTabNavigator({
   Home: { screen: HomeScreen },
   Screen3: { screen: Screen3 },
});

export default createAppContainer(TabNavigator);

Это не позволит использовать два «экспорта по умолчанию» на одной странице. Как я могу добавить createBottomTabNavigator, сохранив createStackNavigator для сопоставления всех моих экранов?


react-native stack-navigator react-navigation tabnavigator
person Mochi08    schedule 14.03.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Что-то вроде этого.

import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import Screen1 from './Screens/Screen1';
import Screen2 from './Screens/Screen2';
import Screen3 from './Screens/Screen3';
import Screen4 from './Screens/Screen4';

const Home = createStackNavigator({
  Screen1, Screen2
});

const List = createStackNavigator({
  Screen3, Screen4
});

const TabNav = createBottomTabNavigator({
  Home, List
});

export default createAppContainer(TabNav);

Здесь ваш дом может быть Screen1 и Screen2 может быть элементом экрана1 и то же самое для Screen3 and Screen4

person Iqbal Jan    schedule 14.03.2019
comment
Просто вопрос, когда вы объявляете более одного экрана для Home, а затем добавляете Home в BottomTabNavigator, всегда ли вкладка Home переходит на первый экран, который вы объявили для Home? - person Mochi08; 14.03.2019
comment
Сначала он, как всегда, перейдет к первому экрану, пример здесь к экрану 1, но если вы хотите добавить еще экран, вам просто нужно добавить его в свой домашний стек, как например Screen1, Screen2, Screen3. затем, если вам это нужно, перейдите к какому-нибудь примеру экрана Screen3, вы просто вызываете this.props.navigation.navigate ('Screen3', {name: 'somename'}); когда вы нажимаете на какую-то кнопку - person Iqbal Jan; 15.03.2019

arrow_upward
1
arrow_downward

Вы можете использовать следующий код:

import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import Screen1 from './Screens/Screen1';
import Screen2 from './Screens/Screen2';
import Screen3 from './Screens/Screen3';

class HomeScreen extends React.Component {
  render() {
    return (
       <View><Text>Welcome</Text></View>
    );
 } 
}

const AppNavigator = createStackNavigator({
  Home: { screen: TabNavigator },
  Screen1: { screen: Screen1 },
  Screen2: { screen: Screen2 },
  Screen3: { screen: Screen3 },
});

const TabNavigator = createBottomTabNavigator({
  Home: { screen: HomeScreen },
  Screen3: { screen: Screen3 },
});

export default createAppContainer(AppNavigator);
person Maneesh    schedule 14.03.2019