环境:Win10 + Android
已经在Windows电脑上安装好 Node(v14+)、Git、Yarn、 JDK(v11)
javac -version
javac 11.0.15.1
---
node -v
v16.14.1
👉 官方文档
%ANDROID_SDK_ROOT%
%ANDROID_SDK_ROOT%\platform-tools
%ANDROID_SDK_ROOT%\emulator
%ANDROID_SDK_ROOT%\tools
%ANDROID_SDK_ROOT%\tools\bin
下载zip文件,解压,双击运行 scrcpy.exe
可执行文件即可在电脑上投影手机屏幕,如下图👇
运行可执行文件之前,使用数据线连接Android手机,进行开发者选项设置(不同的手机进入开发者模式略有差异,自行搜索,我用的是华为手机)
adb devices
adb devices
List of devices attached
8TFDU18719000649 device
adb 命令,在下载
scrcpy
的时候已经内置了
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
进入到自己的工作目录,执行下面的命令创建 react native 项目
npx react-native init AwesomeProject
开发者选项配置修改,最终实现在电脑上可以投屏手机,并可以在电脑上操控手机
npm run android
or
-------------------
cd AwesomeProject
yarn android
# 或者
yarn react-native run-android
运行的时候会在手机上弹窗 “是否统一安装软件”之类的提示,点击同意即可
猜测是多设备连接受影响了,可以尝试重启手机解决 也可以尝试如下步骤: 启停 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
,就可以访问到电脑上启动的服务了。
注意:
VScode是默认解析ts的,但是不会默认识别 Flow
(静态类型检测工具)的语法,所以这种的代码会被解析成ts语法。
Ctrl+Shift+P
,输入setting.json
,选择 首选项:打开设置(json)。settings.json
// "import type" 声明只能在 TypeScript 文件中使用。
"javascript.validate.enable": false,
开发者模式 -> USB调试 -> 监控ADB安装应用 -> 关闭, 即可解决。
默认端口号是8081,通过指定不同的端口号来启动。
react-native start --port=8082
app_name
即可,重新 yarn android
,发现手机上软件的名称已修改成功。文件: android\app\src\main\res\values\strings.xml
<resources>
<string name="app_name">远点</string>
</resources>
通过插件修改名字,必须是 使用 react-native init xxx
创建的项目
# 安装
npm install react-native-rename -g
or
yarn global add react-native-rename
# 项目根目录执行命令
npx react-native-rename <newName>
修改完成。
本篇完!后面继续分享如何调试react native项目。