如何在 React Native 中使用 CreateBottomTabNavigator？

Question

当前代码

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

我想做的事

我想使用 createBottomTabNavigator 在底部制作标签。 主页和我的页面选项卡。

我面临的错误

错误：创建导航器不带参数。也许您正在尝试将 React Navigation 4 API 与 React Navigation 5 一起使用？

ps

我正在使用

"@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

在 StackNavigator 中添加 bottomTabNavigator。将来，如果您要添加更多屏幕，您可以将其添加到堆栈中

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;