react native搭建过程

本文详细介绍了在Windows环境下配置React Native开发环境的全过程,包括Node.js、Git、Yarn、JDK的安装,Android Studio、Android SDK、Scrcpy的下载与设置,以及如何使用adb命令。接着,通过npx初始化React Native项目,并通过Android Studio运行到手机,讲解了adb reverse命令的作用。最后,分享了一些React Native开发的小技巧,如VSCode代码高亮问题、避免每次手动安装应用、启动多个项目的方法以及修改软件包名称的操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


react native 文档链接

1、环境配置

环境:Win10 + Android

已经在Windows电脑上安装好 Node(v14+)、Git、Yarn、JDK(v11)
低于 0.67 版本的 React Native 需要 JDK 1.8 版本(官方也称 8 版本)

javac -version
javac 11.0.15.1

---
node -v
v16.14.1

2、Android Studio下载安装

下载地址
在这里插入图片描述

3、Android SDK 下载安装

安装 android sdk
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.1、环境变量配置

配置系统变量
在这里插入图片描述

Path 配置:

%ANDROID_SDK_ROOT%\platform-tools
%ANDROID_SDK_ROOT%\emulator
%ANDROID_SDK_ROOT%\tools
%ANDROID_SDK_ROOT%\tools\bin

4、Scrcpy 手机模拟器下载安装使用

下载地址

在这里插入图片描述

下载zip文件,解压,双击运行 scrcpy.exe 可执行文件即可在电脑上投影手机屏幕,如下图👇
在这里插入图片描述
在这里插入图片描述

运行可执行文件之前,使用数据线连接Android手机,进行开发者选项设置(不同的手机进入开发者模式略有差异,自行搜索,我用的是华为手机)

电脑端查看连接设备
adb devices

adb devices
List of devices attached
8TFDU18719000649        device

adb 命令,在下载 scrcpy 的时候已经内置了

5、安装 React Native

npm i react-native-cli -g

$ react-native -v
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

6、初始化项目

进入到自己的工作目录,执行下面的命令创建 react native 项目

npx react-native init AwesomeProject

如果 出现如下报错:

cli.init is not a function

在这里插入图片描述
产生这个问题的原因是:使用这种方式创建工程,在react-native 版本是0.69 版本上不适用。各位可以检查下自己安装的React-native的版本。
为了解决这个错误,我们要做的就是降级我们最新的 0.69 版本的 react native。要使用较旧的项目降级我们的项目,您必须执行以下命令。
可以将之前输入的命令改成:

npx react-native init AwesomeProject --version 0.68.2

在这里插入图片描述
看到如上图片,代表初始化成功。

7、运行项目安装软件到安卓机

7.1、先 用数据线连接手机和电脑,运行scrcpy 软件

开发者选项配置修改,最终实现在电脑上可以投屏手机,并可以在电脑上操控手机

7.2、打开 android studio 编辑器,运行项目

npm run android

or
-------------------
cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

运行的时候会在手机上弹窗 “是否统一安装软件”之类的提示,点击同意即可
在这里插入图片描述
在这里插入图片描述

7.3、adb reverse 命令使用

adb 文档

解决问题
在这里插入图片描述

猜测是多设备连接受影响了,可以尝试重启手机解决
也可以尝试如下步骤: 启停 adb 服务器

在某些情况下,您可能需要终止 adb 服务器进程,然后重启以解决问题(例如,如果 adb 不响应命令)。

如需停止 adb 服务器,请使用 adb kill-server 命令。然后,您可以通过发出其他任何 adb 命令来重启服务器。
adb kill-server
adb start-server
adb reverse tcp:8081 tcp:8081

作用

adb reverse tcp:8081 tcp:8081

这条命令的意思是,Android允许我们通过ADB,把Android上的某个端口映射到电脑(adb forward),或者把电脑的某个端口映射到Android系统(adb reverse),在这里假设电脑上开启的服务,监听的端口为8081。Android手机通过USB连接电脑后,在终端直接执行adb reverse tcp:8081 tcp:8081,然后在手机中访问127.0.0.1:8081,就可以访问到电脑上启动的服务了。

注意:

  1. 必须是在连接数据线usb的前提下才能使用该方案进行代码调试。 (Android 5.0 及以上)使用 adb reverse
  2. 命令,这个选项只能在 5.0 以上版本(API 21+)的安卓设备上使用。

8、react-native开发小知识

8.1、vscode 上代码飘红

在这里插入图片描述

  • 问题原因: VScode是默认解析ts的,但是不会默认识别 Flow(静态类型检测工具)的语法,所以这种的代码会被解析成ts语法。

  • 解决方法: 快捷键Ctrl+Shift+P,输入setting.json,选择 首选项:打开设置(json)。

settings.json

// "import type" 声明只能在 TypeScript 文件中使用。
"javascript.validate.enable": false,

8.2、npm run android 每次都需要在手机上重新安装软件包

开发者模式 -> USB调试 -> 监控ADB安装应用 -> 关闭, 即可解决。

8.3、本地开发启动多个项目

默认端口号是8081,通过指定不同的端口号来启动。

react-native start --port=8082

8.4、修改软件包名称

1.修改配置文件
Android
修改配置文件里的 app_name 即可,重新 yarn android ,发现手机上软件的名称已修改成功。
文件: android\app\src\main\res\values\strings.xml

<resources>
    <string name="app_name">远点</string>
</resources>

2.react-native-rename 插件修改
通过插件修改名字,必须是 使用 react-native init xxx 创建的项目

# 安装
npm install react-native-rename -g
or
yarn global add react-native-rename

# 项目根目录执行命令
npx react-native-rename <newName>
### 使用 React Native 构建直播应用程序 构建一个基于 React Native 的直播应用程序涉及多个技术层面,包括前端 UI 设计、实时音视频流处理以及后台服务的支持。以下是关于如何利用 React Native 实现这一目标的关键点: #### 1. 前端开发环境搭建 React Native 是一种用于构建跨平台移动应用的技术框架。开发者可以通过 JavaScript 和其生态系统来创建 iOS 和 Android 应用程序[^3]。为了启动项目,需安装 Node.js 和 Expo CLI 或者手动配置 React Native 环境。 ```bash npx react-native init LiveApp cd LiveApp npm install --save react-navigation @react-native-webrtc/react-native-webrtc ``` 上述命令初始化了一个新的 React Native 项目并引入了 `@react-native-webrtc` 插件,该插件对于实现实时通信至关重要[^2]。 #### 2. 音视频通话的核心技术支持 要实现直播功能,通常需要依赖 WebRTC 技术栈。WebRTC 提供了一种开放标准协议集,允许浏览器和移动端设备之间进行 P2P 流媒体传输。在 React Native 中,可以借助社区维护的模块如 `react-native-webrtc` 来集成这些能力。 - **摄像头访问**: 调用手机硬件资源获取视频输入。 ```javascript import { RTCView } from 'react-native-webrtc'; function CameraPreview() { const localStream = useLocalStream(); // 自定义 Hook 获取本地流 return ( <RTCView streamURL={localStream.toURL()} style={{ width: 300, height: 400 }} /> ); } ``` 此代码片段展示了如何渲染用户的前置摄像机画面到屏幕上[^1]。 - **麦克风权限管理**: 同样也需要请求音频录制许可以便捕捉声音数据并与观众分享。 #### 3. 数据同步与信令服务器设置 除了单纯的多媒体交换外,还需要解决参与者之间的连接协商问题——即所谓的“信令”。这一步骤负责传递 SDP (Session Description Protocol) offer/answer 及 ICE candidate 消息给远端节点完成握手过程。 推荐采用 WebSocket 协议作为轻量级解决方案之一,在云端部署 ExpressJS 或 Socket.IO 创建持久化通道服务于所有客户端实例间的消息转发需求。 #### 4. 用户体验优化及其他注意事项 最后别忘了考虑实际用户体验方面的一些细节调整工作比如网络质量监测反馈机制;延迟控制策略等等因素都会影响最终效果呈现的好坏程度。 ```python def monitor_network_quality(): pass # Implement network quality checks here. ``` 以上函数仅为示意,请根据具体业务场景补充其实现逻辑。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值