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

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

node -V

可以看node版本

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

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

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
});

演示效果如下:
在这里插入图片描述

前面我们已经对ReactNative的环境搭建以及开发的IDE做了相关的讲解,今天我们的主要讲解的是应用设备运行(Running)以及调试方法(Debugging)。本节的前提条件就是大家已经搭建了ReactNative的相关环境。需要运行调试应用,首先我们需要使用react-nativeinitxxproject来创建一个项目,这个步骤虽然在之前我们已经讲过了,不过这边在演示一下。[注].该命令创建项目时间有时候会比较耗时,一般几分钟吧,请耐心等待!运行日志截图如下:[注意].如果你需要应用运行真机设备中,那么我们首先设备要开启USB调试模式。具体真机怎么样打开USB调试模式,请百度哈(
首先按照资料一步步搭建环境运行,然后成功了,很激动,可是,安卓就是没这么容易成功,还是太年轻了 could not get batchedbridge, make sure your bundle is packaged correctly 找资料解决方案是package.json里面的scripts下标签如果没有bundle-android标签的添加一下,以为就好了 接着还...
5、Git for Windows软件说明一下: 我们需要Java开发环境,因为我们这里是开发Android应用。 使用Android Studio是为了Android的SDK。注意的是安装完Android Studio后,记得配置Android SDK环境变量ANDROID_HOME。 安装NodeJ 1. 确保项目的SDK、NDK和JDK配置正确。这些配置可以在Android Studio的设置中进行检查和修改。 2. 点击Android Studio界面上的大象图标,打开项目。 3. 等待项目完全加载后,点击运行按钮(通常是一个绿色的三角形图标),或者使用快捷键Shift + F10来运行项目。 4. 如果要在真机运行项目,可以通过USB连接真机。有两种方式可以连接真机: - 使用USB数据线将真机连接到计算机上,然后在Android Studio中选择真机作为运行目标。 - 使用adb命令行工具进行连接。在命令行中输入以下命令:`adb reverse tcp:8081 tcp:8081`,然后运行`npx react-native start`来启动React Native开发服务器。 以上是在Android Studio中运行项目的基本步骤。请根据您的具体情况进行操作。