准备工作

npx react-native init Union --template react-native-template-typescript

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "/Users/david/ReactNative/Union" && npx react-native run-android
  Run instructions for iOS:
    • cd "/Users/david/ReactNative/Union" && npx react-native run-ios
    - or -
    • Open Union/ios/Union.xcworkspace in Xcode or run "xed -b ios"
    • Hit the Run button
  Run instructions for macOS:
    • See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions.

删除为空应用
App.tsx

import React from 'react';
import { View } from 'react-native';
const App = () => {
  return (
    <View />    
  )
};
export default App;

cd Union
npm install --save @react-navigation/native
npm install --save @react-navigation/native-stack
npm install --save @react-navigation/bottom-tabs
npm install --save react-native-screens
npm install --save react-native-safe-area-context
npm install --save react-native-vector-icons
npm install --save-dev @types/react-native-vector-icons
npm install --save react-native-linear-gradient
npm install --save react-native-safe-area-context
npm install --save create-react-class
npm install --save-dev @types/create-react-class
npm install --save @react-native-community/datetimepicker 
npm install --save react-native-qrcode-svg
npm install --save @react-native-community/netinfo
npm install --save @react-native-picker/picker
npm install --save @react-native-community/slider
npm install --save react-native-webview
npm install --save react-native-gesture-handler
npm install --save pinyin-pro
//npm install --save react-native-share
//npm install @ant-design/icons-react-native
cd ./ios && pod install
cd ..
npx install-expo-modules
npm install -g expo-cli
expo install expo-constants

npm install --save-dev babel-plugin-module-resolver
npm start -- --reset-cache
react-native start "--reset-cache"

import React, { useState } from 'react';
import { StyleSheet, 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';
Ionicons.loadFont().then();
const styles = StyleSheet.create({
  redDot: {
    top: Platform.OS === "ios" ? 4 : 9,
    left: 4,
    minWidth: 10,
    maxHeight: 10,
    borderRadius: 5,
    fontSize: 6,
    lineHeight: 9,
    alignSelf: undefined,
  },
});
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 = () => {
  const [showReddot, setShowRdddot] = useState(true);
  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={ showReddot? {
          tabBarBadgeStyle: styles.redDot,
          tabBarBadge: ""} : {}}/>
      </Tab.Navigator>
    </NavigationContainer>
  );
}
export default App;

运行

npx react-native start

npx react-native run-ios

https://github.com/react-native-linear-gradient/react-native-linear-gradient
https://github.com/th3rdwave/react-native-safe-area-context

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