1. 新建React Native空白项目
  2. 安装依赖:

    yarn add @react-navigation/bottom-tabs react-native-safe-area-context createBottomTabNavigator
  3. 最简洁的tabbar示例,App.tsx里放置代码:

    import * as React from 'react';
    import { Text, View } from 'react-native';
    import { NavigationContainer } from '@react-navigation/native';
    import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
    
    function HomeScreen() {
      return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Home!</Text>
     </View>
      );
    }
    
    function SettingsScreen() {
      return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Settings!</Text>
     </View>
      );
    }
    
    const Tab = createBottomTabNavigator();
    
    export default function App() {
      return (
     <NavigationContainer>
       <Tab.Navigator>
         <Tab.Screen name="Home" component={HomeScreen} />
         <Tab.Screen name="Settings" component={SettingsScreen} />
       </Tab.Navigator>
     </NavigationContainer>
      );
    }

    官方文档:https://reactnavigation.org/docs/tab-based-navigation#minimal-example-of-tab-based-navigation

添加新评论