Как использовать CreateBottomTabNavigator в React Native?

Question

Текущий код

Приложение. js

import React from 'react';

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import { Icon } from 'react-native-elements';

import HomeScreen from 'app/src/screens/home/Index';
import DetailScreen from 'app/src/screens/home/Detail';
import MypageScreen from 'app/src/screens/mypage/Index';
import InitialScreen from 'app/src/screens/authentication/Initial';

const Home = {
  screen: HomeScreen,
  navigationOptions: ({ navigation }) => {
    return {
      title: 'Home',
    };
  },
};

const Detail = {
  screen: DetailScreen,
  navigationOptions: ({ navigation }) => {
    return {
      title: 'Detail',
    };
  },
};

const Mypage = {
  screen: MypageScreen,
  navigationOptions: ({ navigation }) => {
    return {
      title: 'MyPage',
    };
  },
};

const Initial = {
  screen: InitialScreen,
  navigationOptions: ({ navigation }) => {
    return {
      title: 'Initial',
    };
  },
}

const HomeStack = createStackNavigator(
  {
    Home,
    Detail,
  },
  {
    initialRouteName: 'Home',
    navigationOptions: {
      tabBarIcon: <Icon name="home" />,
    },
  }
);

const MypageStack = createStackNavigator(
  {
    Mypage,
  },
  {
    initialRouteName: 'Mypage',
    navigationOptions: {
      tabBarIcon: <Icon name="person" />,
    },
  }
);


const postLoginNavigator = createBottomTabNavigator({
  Home: HomeStack,
  Mypage: MypageStack,
});

const AppNavigator = createStackNavigator({
  Initial,
  PostLogin: postLoginNavigator
},{
  mode: 'modal',
  headerMode: 'none',
  initialRouteName: 'Initial'
})

const AppContainer = createAppContainer(AppNavigator);

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

Что я хочу сделать

Я хочу сделать вкладки внизу, используя createBottomTabNavigator. Вкладки «Домашняя страница» и «Моя страница».

Ошибка, с которой я сталкиваюсь

Ошибка: создание навигатора не требует аргумента. Может быть, вы пытаетесь использовать React Navigation 4 API с React Navigation 5?

пс

Я использую

"@react-navigation/native": "^5.2.3",
"@react-navigation/stack": "^5.2.8",
"@react-navigation/bottom-tabs": "^5.0.6",

Я был бы признателен, если бы вы могли дать мне какие-либо советы.

Answer 1

    const MyTabs = () => { 
     return(
        <Tab.Navigator>
          <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen name="Mypage" component={MypageScreen} />
        </Tab.Navigator>);
    }

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

Answer 2

Добавьте bottomTabNavigator внутри StackNavigator. В будущем, если вы добавите больше экранов, вы можете добавить их в стек

import React from 'react';

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Icon } from 'react-native-elements';

import HomeScreen from 'app/src/screens/home/Index';
import MypageScreen from 'app/src/screens/mypage/Index';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const MyTabs = () => {
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Mypage" component={MypageScreen} />
    </Tab.Navigator>
}

const AuthStack = () => (
<Stack.Navigator>
      <Stack.Screen name="Tabs" component={MyTabs} />
    </Stack.Navigator>
);

const AuthenticationNavigator = () => (
  <NavigationContainer>
    <AuthStack />
  </NavigationContainer>
);

export default AuthenticationNavigator;