react native项目搭建：react native+React Navigation+React Native Elements+Emotion+redux+async-storage

1.react native：https://reactnative.cn/
2.Metro：https://metrobundler.dev/docs/configuration/
3.React Navigation：https://reactnavigation.org/
4.React Native Elements：https://reactnativeelements.com/
5.Emotion：https://emotion.sh/docs/introduction
6.redux：https://cn.redux.js.org/index.html
7.@react-native-async-storage/async-storage：https://github.com/react-native-async-storage/async-storage

前言：

本文主要讲解react native项目构建，在构建项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、react native、React Native Elements、Emotion、Metro和redux
本文讲解的功能代码只是简要说明，完整代码可通过下面文章链接下载，下载后请先看README.md文档说明，已踩过大部分坑：
https://blog.youkuaiyun.com/randy521520/article/details/146998467

一、JAVA SDK 安装

1.Oracle官方网站下载： https://www.oracle.com/java/technologies/downloads/?er=221886#jdk22-windows

2.配置环境变量，新增JAVA_HOME环境变量，变量值为安装后的sdk目录

3.编辑path，新增%JAVA_HOME%\bin

4.打开命令行工具，运行 java -version，如下图则安装成功

二、安装Audio Studio

1.访问官网下载即可：https://developer.android.google.cn/studio?hl=zh-cn，也可同通过jet的toolbox下载。如果使用了多种jet开发者工具，建议使用toolbox：https://www.jetbrains.com/zh-cn/toolbox-app/

2.下载后双击安装包进行安装，一直点击next 安装即可

3.安装成功后，打开Audio Studio会报"没有找到安卓SDK"错误，点击Don’t send 和Cancel

4.回到Android Studio安装向导界面，点击next跳到安装类型界面，默认选择标准安装，也可选择自定义安装

5.点击next，选择SDK路径，可使用默认路径。也可修改到合适的位置（SDK路径不能有空格），然后一直点击next安装sdk即可

6.SDK安装成功后，点击Finish，出现以下界面说明Audio Studio安装成功

三、配置SDK环境变量

1.搜索环境变量，并打开编辑系统环境变量

2.新建ANDROID_HOME环境变量，路径为安装的sdk路径，默认sdk路径：C:\Users\你的用户名\AppData\Local\Android\Sdk

3.编辑path，新增%ANDROID_HOME%\platform-tools、%ANDROID_HOME%\emulator

四、初始化项目

1.打开命令行运行cd进合适的目录，运行npx @react-native-community/cli init react_native，等待安装结束

2.使用Audio Studio打开项目中的android目录；也可打开项目目录运行yarn android，第一次启动项目会下载gradle，等待下载成功即可。

3.如果采用项目目录构建项目，gradle下载后，看见下图的报错，说明gradle版本与JDK版本不一致，根据提示下载对应版本的JDK即可，重新配置环境变量，这里提示需要安装JDK17；然后重新运行yarn android

4.如果采用android目录构建项目，点击上面工具栏的“sync project with gradle files”，就会同步gradle，同步gradle会使用Audio Studio自带的jdk

5.适用于android目录：同步gradle时如果遇到下图错误，说明gradle版本与JDK版本不一致，可下载对应版本JDK，在settings找打gradle配置对应jdk版本的路径，配置好jdk路径后再次点击“sync project with gradle files”即可。建议采用android目录构建项目，如果本地需要使用jdk多个版本，采用项目目录构建项目需要频繁切换本地环境变量的版本，实在不方便，而且重复运行yarn android构建项目也是麻烦

6.新建模拟器，随便选一个模拟器安装

7.测试模拟器是否可以使用，点击运行模拟器，若模拟器可以正常启动则安装成功

8.打开Settings>Languages & Frameworks>Android SDK，安装SDK tools下的NDK和CMake

9.适用于android目录：在工具栏顶部可看到启动与选择模拟器的区域，选择模拟器启动app

10.适用于android目录：app启动成功后，如果看到模拟器报下图错误，说明Metro服务未开启，打开项目目录，运行yarn start；重新启动app，看到"Welcome to React Native!"页面。说明项目初始化成功

11.模拟器初始化时是英文，如需设置中文，按照下面视频操作

五、路由配置

1.终端运行命令安装路由相关库

• @react-navigation/native：React Navigation 的核心库，提供导航组件的基础功能和跨平台支持（iOS/Android）。
• @react-navigation/stack：实现堆栈导航（Stack Navigator），模仿原生应用的页面跳转效果，可使用react-native-screens替代。
• @react-navigation/bottom-tabs：React Navigation 提供的底部导航
• react-native-safe-area-context：处理设备安全区域（如 iPhone 刘海屏、底部 Home 条），确保内容不会被遮挡。
• react-native-gesture-handler：提供高性能的手势处理（如滑动、拖拽、缩放等），替代 React Native 默认的手势系统。

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

2.新建src>pages>tab1>tab1.jsx、src>pages>tab2>tab2.jsx、src>pages>tab3>tab3.jsx、src>pages>tab4>tab4.jsx，react native默认使用ts语法，如想使用js语法，将后缀tsx换成jsx即可

import * as React from 'react';
import { View, Text} from 'react-native';

function Tab1() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>我是Tab1</Text>
    </View>
  );
}

export default Tab1;

3.将App.tsx修改为App.jsx，并增加tab路由

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Tab1 from './src/pages/tab1/tab1.jsx';
import Tab2 from './src/pages/tab2/tab2.jsx';
import Tab3 from './src/pages/tab3/tab3.jsx';
import Tab4 from './src/pages/tab4/tab4.jsx';

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

// 定义底部标签导航器
function MainTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Tab1" component={Tab1} />
      <Tab.Screen name="Tab2" component={Tab2} />
      <Tab.Screen name="Tab3" component={Tab3} />
      <Tab.Screen name="Tab4" component={Tab4} />
    </Tab.Navigator>
  );
}

// 全局 Stack 配置
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Tabs" component={MainTabs} options={{ headerShown: false }}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

4.新建src>pages>detail>detail.jsx

import * as React from 'react';
import { View, Text} from 'react-native';

function Detail() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>我是详情页</Text>
    </View>
  );
}

export default Detail;

5.修改App.jsx，增加detail路由

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Tab1 from './src/pages/tab1/tab1.jsx';
import Tab2 from './src/pages/tab2/tab2.jsx';
import Tab3 from './src/pages/tab3/tab3.jsx';
import Tab4 from './src/pages/tab4/tab4.jsx';
import Detail from './src/pages/detail/detail.jsx';

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

function MainTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Tab1" component={Tab1} />
      <Tab.Screen name="Tab2" component={Tab2} />
      <Tab.Screen name="Tab3" component={Tab3} />
      <Tab.Screen name="Tab4" component={Tab4} />
    </Tab.Navigator>
  );
}

// 全局 Stack 配置
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Tabs" component={MainTabs} options={{ headerShown: false }}/>
        <Stack.Screen name="Detail" component={Detail} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

六、配置别名

1.在vite项目中在config中通常会有目录别名的配置，metro虽然不支持配置，但是可以通过一些库实现别名配置，终端运行：yarn add babel-plugin-module-resolver --dev

2.修改babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.jsx', '.json'],
        alias: {
          '@pages': './src/pages',
        },
      },
    ],
  ]
};

3.修改tsconfig.json

{
  "extends": "@react-native/typescript-config",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@pages/*": ["src/pages/*"]
    }
  }
}

4.修改App.jsx中pages的引入方式，页面可以正常显示，说明路径别名配置成功

import Tab1 from '@pages/tab1/tab1.jsx';
import Tab2 from '@pages/tab2/tab2.jsx';
import Tab3 from '@pages/tab3/tab3.jsx';
import Tab4 from '@pages/tab4/tab4.jsx';
import Detail from '@pages/detail/detail.jsx';

七、集成React Native Elements

1.终端运行：yarn add @rneui/themed @rneui/base react-native-vector-icons

2.修改tab1.jsx，使用React Native Elements中的text、button组件

3.React Native Elements主题配置：在src下新增assets>style>them.jsx，并配置路径别名

4.React Native Elements主题配置：修改App.jsx，如果看到button背景变红，说明主题配置生效

5.动态切换主题：在src下新增components>common>SwitchTheme.jsx，并配置路径别名

6.动态切换主题：修改tab1.jsx，使用SwitchTheme组件，可以看到下面视频中切换主题时button背景色随着主题改变而改变；但是SwitchTheme中单选框的图标没有显示，这是因为react-native-vector-icons库中的图标并没有链接到项目


7.解决react-native-vector-icons图标不显示：第一种方法就是在node_modules中找到react-native-vector-icons把里面字体图标复制到android/app/src/main/assets/fonts/

8.解决react-native-vector-icons图标不显示：第二种方法就是在android/app/build.gradle顶部加上apply from: “…/…/node_modules/react-native-vector-icons/fonts.gradle”

八、集成Emotion

1.终端运行：yarn add @emotion/native @emotion/react

2.新建assets>style>globalMixin.jsx、assets>style>globalStyle.jsx

3.新建pages>tab1>style.jsx

4.修改tab1.jsx，可以看到无论是居中样式、圆角样式都已生效，说明Emotion集成成功

5.使用主题变量：新建components>common>EmotionThemeProvider.jsx

6.使用主题变量：修改App.jsx，使用EmotionThemeProvider组件

7.使用主题变量：修改tab1.jsx，使用样式化组件；由于css不能使用props拿到主题配置，如果想要css也使用主题中的变量，只能使用globalMixin中的写法，把主题传到函数里面

九、集成字体图标

1.字体图标集成以阿里icon为例，访问：https://www.iconfont.cn/ 图标库，搜索返回，任选一个图标加入购物车

2.去购物车中，选择下载代码

3.把下载好的.tff文件复制到android/app/src/main/assets/fonts/

4.新建src>assets>fonts，把.tff、.json文件复制到该文件夹下

5.新建src>components>common>AliIcon.jsx

6.修改tab1.jsx，使用AliIcon组件

十、状态管理器

1.终端运行：yarn add @reduxjs/toolkit react-redux redux-persist @react-native-async-storage/async-storage

2.在src下新建store>redux.jsx、store>persistConfig.jsx、store>demoStore.jsx，并配置路径别名（之前配置过路径别名，之后就不再演示）

3.修改App.jsx，使用redux

4.修改Tab.jsx，使用demoStore，从下方视频可以看出demoStore中的name可以正常显示，而且修改store后刷新应用，还保留这修改后的store，说明store持久化配置成功

十一、国际化配置

1.终端运行：yarn add i18next react-i18next react-native-localize，安装i18next、react-i18next、react-native-localize

2.在src下新建lang>enum.jsx、lang>en_us.jsx、lang>zh_cn.jsx、lang>lang.jsx

3.修改App.jsx，导入lang.jsx

4.新建src>components>common>SwitchLang.jsx

5.修改tab1.jsx，使用SwitchLang，由下视频可以看出中英文可以随意切换，而且刷新应用后会保留上一次的语言配置（主题配置流程中未采用AsyncStorage缓存，刷新后主题会失效，如需刷新后保持主题可采用lang切换的方法）

十二、集成axios

1.终端运行：yarn add axios，安装axios

2.新建src>common>requests.jsx，并配置路径别名

3.修改tab1.tsx，使用requests

十三、Android真机调试

1.打开手机设置，在关于手机中找到软件版本，连需点击5-7次打开开发者模式

2.在开发者选项中打开USB调试，开发者选项一般在系统与更新中，如果未找到可以在设置中搜索

3.使用USB连接电脑，会弹出USB连接数方式选择传输文件，然后会弹出是否运行USB调试，确认即可

4.在android studio中选择真机调试的手机，运行app

5.如果遇到下图报错，可以打开命令行运行adb reverse tcp:8081 tcp:8081，即可正常打开应用。可使用adb reverse --list查看映射端口，adb reverse --remove tcp:8081移除映射端口；安卓模拟器也可使用此方法操作，如：雷电模拟器

十四、配置调试工具react-devtools

1.命令行工具运行：npm install -g react-devtools，全局安装react-devtools工具

2.安装react-devtools若是很慢或者报错electron，可运行npm config edit编辑.npmrc，增加或修改electron镜像源electron_mirror、electron_builder_binaries_mirror非官方提供的配置项；也可直接修改环境变量增加electron_mirror、electron_builder_binaries_mirror

electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

3.模拟器设置中搜索build number连续点击多次build number开启开发者模式

4.项目运行成功，且模拟器运行成功后，运行react-devtools命令，会自动连接模拟器，如果没有自动连接，可运行命令：adb shell input keyevent 82。也可参照官方文档操作：https://reactnative.cn/docs/debugging

5.使用内置的调试工具，使用adb shell input keyevent 82打开内置的开发菜单后，会有Open DevTools选项，该选项可打开react native的内置调试工具