共计 2380 个字符,预计需要花费 6 分钟才能阅读完成。
1、前言
环境:Win10 + Android
曾经在 Windows 电脑上装置好 Node(v14+)、Git、Yarn、
JDK(v11)
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%
%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
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
,就能够拜访到电脑上启动的服务了。
留神:
- 必须是在连贯数据线 usb 的前提下能力应用该计划进行代码调试。
- (Android 5.0 及以上)应用 adb reverse 命令,这个选项只能在 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、批改软件包名称
- 批改配置文件
Android
批改配置文件里的app_name
即可,从新yarn android
,发现手机上软件的名称已批改胜利。
文件:android\app\src\main\res\values\strings.xml
<resources>
<string name="app_name"> 远点 </string>
</resources>
- 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 我的项目。
🎈🎈🎈
🌹 关注我,你会发现一个虚浮致力的宝藏前端😊,让咱们一起学习,独特成长吧。
🎉 喜爱的小伙伴记得点赞关注珍藏哟,回看不迷路 😉
✨ 欢送大家转发、评论交换
🎁 蟹蟹😊