如何在 React Native 中使用 CreateBottomTabNavigator？

Question

Current code

App.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 />
    );
  }
}

What I want to do

I wanna make tabs in bottom using createBottomTabNavigator. Home and My Page tabs.

Error that I'm facing

Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5?

ps

I'm using

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

I would appreciate it if you could give me any advices.

Answer 1

Add the bottomTabNavigator inside a StackNavigator. In future, if you are adding more screens you can add it to the stack

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;

Answer 2

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

Can you try this? I think I missed the return statement