RN环境搭建

使用cli搭建

npx react-native init AwesomeProject
npx react-native init AwesomeTSProject --template react-native-template-typescript // 指定对应的模板

yarn ios 
# 如果报错直接下面的命令
cd ./ios
pod install # 报错直接百度查找 CocoaPods 安装方式

在项目中集成 react-navigation

yarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs react-native-safe-area-context react-native-screens

// routes.tsx #后期在添加一些配置
import * as React from 'react';
import {Text, View, Button} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';

import {useNavigation} from '@react-navigation/native';

import HomeScreen from './src/page/Home/index';
import UserScreen from './src/page/User/index';
import SettingScreen from './src/page/Setting/index';
import AddScreen from './src/page/Add/index';

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

export default function Routes() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="Home"
          screenOptions={{
            headerShown: false, // 隐藏header
          }}
          >
          <Stack.Screen name="Home" >
            {() => (
              <Tab.Navigator
                backBehavior="none"
                initialRouteName="Analitics"
                screenOptions={({route}) => ({
                  tabBarActiveTintColor: 'tomato',
                  tabBarInactiveTintColor: 'gray',
                })}>
                <Tab.Screen name="首页" options={{ 
                  tabBarBadge: 3 , // 添加角标
                    header: ({ navigation, route, options }) => {
                      // 自定义 header
                      const title = getHeaderTitle(options, route.name);
                      return <Header title={title} style={options.headerStyle} />;
                    },
                  }} component={HomeScreen} />
                <Tab.Screen name="用户" component={UserScreen} />
              </Tab.Navigator>
            )}
          </Stack.Screen>
          <Stack.Screen name="Add" component={AddScreen} />
          <Stack.Screen name="Setting" component={SettingScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}