如何在React Native中使用CreateBottomTabNavigator？

Posted 2023-02-05

当前代码

应用程序.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.Home和My Page标签在底部制作标签。

我所面临的错误

错误。创建一个导航仪不接受参数。也许你正在尝试使用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",

如果您能给我一些建议，我会非常感激。

答案

在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;

另一答案

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

你可以试试这个吗？我想我漏掉了回报声明