React Native项目如何在真机上运行？

温馨提醒：
如果你之前没有接触过 Android 的开发环境，那么请做好心理准备，这一过程相当繁琐并且会占用大量的内存空间，请准备好WIFI环境。

准备工作

node

Node 的版本应大于等于 16，安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程。
按下win+r,输入cmd，进入命令行界面，输入

node -V

可以看node版本

# 使用nrm工具切换淘宝源
npx nrm use taobao

如果没有node环境，可以点击进入Node.js官网下载

yarn

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

安装 Android Studio

点击上面的Android Studio关键字跳转到相应的下载网址，如下所示


按照图中所示勾选，下载至Windows系统
下载得到 android-studio-2022.2.1.19-windows.exe，双击打开安装

在这里可以点击Browse……选择一个非系统盘（C盘）的文件夹目录

勾选 Start Android Studio会自动打开Android Studio
按照以上图片的安装步骤勾选选项，就安装好了

配置 Android Studio

选择配置

打开后会弹出一个弹窗如下，默认选择第二个选项就好

是否要配置代理

下一步如果出现如下弹窗，就是想让你配置一个代理，在我们没有熟悉 Android Studio或者没有经常用的时候，这个配置无需理会，点击 Cancel 关闭弹窗

进入初始配置页面，点击Next

选择自定义安装

选择安装路径

这里使用默认路径即可，直接Next

选择主题背景颜色

选哪个都无所谓，看个人喜好

勾选要下载的内容

如下图所示全部勾上，包括Android Virtual Device，Android SDK Location路径必须使用默认，点击 Next 走下一步：

这一步是检测到你可以设置系统加速，推荐就好，继续点击 Next 走下一步：

安装确认，点击Next

要下载的详情

显示都需要安装什么包，继续Next

同意协议

分别点击左边的三个项目，勾选右边的 Accept 表示同意协议，然后点击 Finish：

进入安装个个包的界面

点击 Show Details 查看要下载的具体内容

这个过程比较慢，请耐心等待

下载完成

等到下载完成， 点击 Finish 完成

配置ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建（用户变量），创建一个名为ANDROID_HOME的环境变量，指向你的 Android SDK 所在的目录，具体的路径可能和下图不一致，请自行确认

添加完成后，如下图所示

把一些工具目录添加到环境变量 Path

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，双击 名为PATH的环境变量 进入编辑。如下图所示：

进入编辑后的页面

然后点击新建然后把这些工具目录路径添加进去：platform-tools、emulator、tools、tools/bin，如上图一样地配置好这四项

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

配置完成后，连续点击确定即可

测试是否连接手机

手机连接电脑之前，需要给手机开启开发者模式，以及debug调试，不同的手机有不同的启用方式，在此就不过多介绍了，请自行查百度
用数据线在电脑上连接手机，连上以后，一定要选中可以传输文件，否则运行不成功

注意：一定要选择传输文件

然后在VsCode的终端执行以下命令查看是否有连接的手机服务：

adb devices

如果有显示device，就证明连接成功了
如果没有的话，就去检查是不是哪个步骤出错了

在真机运行

连接成功后，在VsCode终端中，输入以下命令运行在真机中：

npm run android

在此过程中，一定要注意看手机，它会在手机中安装一个Expo Go软件，要同意安装，安装好以后，就运行好了，运行效果如下：

当前这个页面太过简单了，不足以看出效果
用以下代码替换掉App.js中原有的代码，可以展示一些效果

import { StatusBar } from 'expo-status-bar';
// import { useState } from 'react';
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';

export default function App() {

  const hit = ()=>{
    alert("Hello")
  }

  return (
    // onPress 设置点击事件
    // onLongPress 设置长按事件
    // numberOfLines  文字超出加省略号不换行
    // selectable 是否能选中
    // ActivityIndicator loading加载指示器组件
    <View style={styles.container}>
      <Text onLongPress={()=>{alert("我的")}} numberOfLines={1} selectable={false} style={[styles.textStyles,styles.textHeadStyle]}>Open up App.js to start working on your app!</Text>
      <Text onPress={hit} style={styles.textStyles}>
        你好！{'\n'}ReactNative！
        <Text style={{color:"#00f"}}>我的</Text>
      </Text>
      <StatusBar style="auto" />
      
      <ActivityIndicator
      animating={true}
      color={"gray"}
      ></ActivityIndicator>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  textStyles: {
    fontSize: 20,
    color: "#f0f",
    lineHeight: 50
  },
  textHeadStyle: {
    color: "#c00"
  },
  img1:{
    height:100,
    width:100
  }
});

演示效果如下：