时间戳

首页 > 解决方案 > 如何在 React Native 中使用 CreateBottomTabNavigator？

javascript - 如何在 React Native 中使用 CreateBottomTabNavigator？

问题描述

当前代码

应用程序.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",

如果您能给我任何建议，我将不胜感激。

标签： javascriptreactjsreact-native

解决方案

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

你能试试这个吗？我想我错过了退货声明

推荐阅读