嵌套导航器

标签导航器

https://reactnavigation.org/docs/tab-based-navigation

npm install @react-navigation/bottom-tabs

基于选项卡的导航的最小示例

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();
const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
export default App;

自定义外观及徽章

https://github.com/oblador/react-native-vector-icons
https://ionic.io/ionicons

npm install --save react-native-vector-icons
npm install @types/react-native-vector-icons

npx react-native link react-native-vector-icons
npx react-native start –reset-cache
npx react-native run-ios

import * as React from 'react';
import { Text, View, Platform } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}
function PersonScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Person!</Text>
    </View>
  );
}
function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}
const Tab = createBottomTabNavigator();
const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarActiveTintColor: 'green',
          tabBarInactiveTintColor: 'gray',
          tabBarIcon: ({ focused, color, size }) => {
            let iconName: string; 
            if (route.name === 'Home') {
              iconName = focused? 'chatbubbles' : 'chatbubbles-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'settings' : 'settings-outline';
            } else if (route.name === 'Person') {
              iconName = focused ? 'person' : 'person-outline';
            } else {
              iconName = ""
            }
            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
      >
        <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarBadge: 3 }}/>
        <Tab.Screen name="Person" component={PersonScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} options={{
          tabBarBadgeStyle: {
            top: Platform.OS === "ios" ? 4 : 9,
            left: 4,
            minWidth: 10,
            maxHeight: 10,
            borderRadius: 5,
            fontSize: 6,
            lineHeight: 9,
            alignSelf: undefined,
          },
          tabBarBadge: ""
        }}/>
      </Tab.Navigator>
    </NavigationContainer>
  );
}
export default App;