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项目。


关注我,你会发现一个踏实努力的宝藏前端,让我们一起学习,共同成长吧。

喜欢的小伙伴记得点赞关注收藏哟,回看不迷路

欢迎大家转发、评论交流

蟹蟹

React Native环境配置、初始化项目、打包安装到手机,以及开发小知识的更多相关文章

  1. 最详细React Native环境配置及项目初始化(2018-10-14)

    注意配环境一定要全程使用稳定VPN工具,否则会浪费大量时间!!!相信我 一.截止到项目初始化之前也就是执行这条命令之前都按官网的方法就可以 https://reactnative.cn/docs/ge ...

  2. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  3. 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

    史上最详细Windows版本搭建安装React Native环境配置   2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views ...

  4. React Native环境配置

    React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有 ...

  5. React Native环境配置之Windows版本搭建

    接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...

  6. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  7. Windows版本搭建安装React Native环境配置及相关问题

    此文档整理参考地址: http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C% ...

  8. Windows版本搭建安装React Native环境配置

    1 安装Chocolatey 打开cmd黑窗口 @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-obje ...

  9. 史上最详细Windows版本搭建安装React Native环境配置

    说在前面的话: 感谢同事金晓冰倾情奉献本环境搭建教程 之前我们已经讲解了React Native的OS X系统的环境搭建以及配置,鉴于各大群里有很多人反应在Windows环境搭建出现各种问题,今天就特 ...

  10. react native 环境配置

    1. 安装Homebrew Homebrew主要用于安装后面需要安装的watchman.flow 打开MAC的终端,输入如下命令: ruby -e "$(curl -fsSL https:/ ...

随机推荐

  1. SQL--子查询

    什么是子查询 子查询:顾名思义,在一个查询中,有另外一个查询,这个查询就叫做,主查询的子查询. [把一个查询的结果,在另一个查询中使用就叫子查询.(将一个查询语句,作为一个结果集,供其他SQL语句使用 ...

  2. [游戏学习25] MFC 橡皮筋画线效果

    >_<:这是给出窗口内外不同情况的处理展示的例子. >_<:MouseCap.h #include<afxwin.h> class CMyApp :public C ...

  3. 在安装SqlServer2008时,有一项安装程序支持规则,为什么重新启动计算机那一项总是失败

    1.运行 regedit 打开注册表编辑器. 2.依次展开HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager目录,找 ...

  4. Qt之绘制闪烁文本

    简述 根据之前的二位绘图,我们可以很轻松的进行文本的绘制,如果需要一些特效,比如:文本闪烁.我们就必须借助其它辅助类来完成. 简述 原理 实现 效果 源码 原理 主要涉及两个辅助类: QFontMet ...

  5. Codeforces Round #105 (Div. 2) ABCDE

    A. Insomnia cure 哎 只能说英语太差,一眼题我看了三分钟. 题意:给5个数k, l, m, n 和 d,求1~d中能被k, l, m, n 至少一个整除的数的个数. 题解:…… 代码: ...

  6. 对象-关系映射ORM(Object Relational Mapping)(转)

    ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现 Hibernate在实现ORM功能的时候主要用到的文件有:映射类(*.java).映射文件(*.hbm.xml)和数据库配置文件 ...

  7. shell重定向

    输入重定向 和输出重定向一样,Unix 命令也可以从文件获取输入,语法为: command < file 这样,本来需要从键盘获取输入的命令会转移到文件读取内容. 注意:输出重定向是大于号(&g ...

  8. 再谈JSON -json定义及数据类型

    再谈json 近期在项目中使用到了highcharts ,highstock做了一些统计分析.使用jQuery ajax那就不得不使用json, 可是在使用过程中也出现了非常多的疑惑,比方说,什么情况 ...

  9. gRPC编码初探(java)

    背景:gRPC是一个高性能.通用的开源RPC框架,其由Google主要面向移动应用开发并基于HTTP/2协议标准而设计,基于ProtoBuf(Protocol Buffers)序列化协议开发,且支持众 ...

  10. Android Metro风格的Launcher开发系列第三篇

    前言: 各位小伙伴,又到了每周更新文章了时候了,本来是周日能发出来呢,这不是赶上清明节吗,女王大人发话了,清明节前两天半陪她玩,只留给我周一下午半天时间写博客,哪里有女王哪里就有压迫呀有木有!好了闲话 ...