6、初始化项目

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

npx react-native init AwesomeProject
7、运行项目安装软件到安卓机
7.1、先 用数据线连接手机和电脑，运行scrcpy 软件
开发者选项配置修改，最终实现在电脑上可以投屏手机，并可以在电脑上操控手机
7.2、打开 android studio 编辑器，运行项目
npm run android
-------------------
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
yarn global add react-native-rename
# 项目根目录执行命令
npx react-native-rename <newName>
修改完成。
本篇完！后面继续分享如何调试react native项目。
🎈🎈🎈
🌹 关注我，你会发现一个踏实努力的宝藏前端😊，让我们一起学习，共同成长吧。
🎉 喜欢的小伙伴记得点赞关注收藏哟，回看不迷路 😉
✨ 欢迎大家转发、评论交流
🎁 蟹蟹😊
    
本文来自博客园，作者：甜点cc，转载请注明原文链接：https://www.cnblogs.com/all-smile/p/16550899.html