乐趣区

关于程序员:React-Native环境配置初始化项目打包安装到手机以及开发小知识

jiezi

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，就能够拜访到电脑上启动的服务了。

留神：

  1. 必须是在连贯数据线 usb 的前提下能力应用该计划进行代码调试。
  2. (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、批改软件包名称

  1. 批改配置文件
    Android
    批改配置文件里的 app_name 即可，从新 yarn android，发现手机上软件的名称已批改胜利。

文件：android\app\src\main\res\values\strings.xml

<resources>
    <string name="app_name"> 远点 </string>
</resources>
  1. 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 我的项目。

🎈🎈🎈

🌹 关注我，你会发现一个虚浮致力的宝藏前端😊，让咱们一起学习，独特成长吧。

🎉 喜爱的小伙伴记得点赞关注珍藏哟，回看不迷路 😉

✨ 欢送大家转发、评论交换

🎁 蟹蟹😊

退出移动版