React-Native Android环境搭建

  • Z时代
  • 2024-01-10
  • 分类：综合

react

2018.9.26 mac 下搭建react native:

搞了好久，就是因为cnpm,还是去年写下这个demo,其实在mac下搭建react native跟着官网走，不是很困难，就怕随心所欲的使用，例如cnpm，至少在react native中是完全不能用的，

1.主要问题是，react-native 已经到0.57.1，对babel的依赖有所增加，需要安装@babel/runtime

2.先npm install @babel/runtime 再npm install ,最后在react native run ios

3.有第二步是因为我，在react native run ios 时报错，如果没有，可以跳过第二步

最近一个星期，每天都是上午写业务代码，下午搞搞react-native,个人是这样认为的，首先自己能够独立把开发环境搭起来，其次就是测试，要么调用真实机，要么使用模拟器来辅助开发，没有Mac,只有台式机，所以就装了Android的开发环境，下面是几天的效果：

  1. 安装java SDK，（我在公司的台式机上装的是8.x的版本可以用，但是在家里的笔记本上装的是9.x的版本出了个错，然后我又退回8.x的版本，就好了）。下载地址：http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html

  2. 安装Android Studio，

1、在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

2、在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须包含有这个版本。当然如果其他插件需要其他版本，你可以同时安装其他多个版本）。然后还要勾选最底部的Android Support Repository.

3、ANDROID_HOME环境变量

确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。

（路径为：Android SDK Location:指向的路径）（安装时路径要记一下）

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建

4、将Android SDK的Tools目录添加到PATH变量中

你可以把Android SDK的tools和platform-tools目录添加到PATH变量中，以便在终端中运行一些Android工具，例如android avd或是adb logcat等。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 选中PATH -> 双击进行编辑

tools和platform-tools的路径也是Android SDK Location指向的路径下（一再强调安装时路径要记一下）

5、安装react-native命令行工具

npm install -g react-native-cli

准备初始化项目

6、创建项目

进入你的工作目录，运行

react-native init MyProject

查看下项目有无成功创建

7、在项目下运行react-native start，等包下载完访问 http://localhost:8081/index.bundle?platform=android

如下图出现大片js代码，代表成功

连接安卓手机

8、开发者模式下，使用usb连接，并在电脑上安装手机的驱动程序，

检查是否有设备接入：在Git Bash Here中切换到项目目录下，使用adb diveces

如果是出现unauthorized（没有授权），需进行授权，断开设备，重新进行usb链接，

9、运行项目

保持packager开启，我使用的是vscode,所以增加一个命令行react-native run-android

如果出现问题可访问https://github.com/facebook/react-native/issues/10787

10、使用Genymotion模拟器，下载安装，可能下载得时候需要科学上网进行注册（这里自行解决），安装好了选择一个自己喜欢的机型添加并下载包，保存后，重启项目，应该可以在模拟器中跑起来

这里需要注意一个问题，笔记本默认是没有开启虚拟化设置，参考下面设置一下就ok. https://jingyan.baidu.com/article/335530daa55d7e19cb41c3c2.html

以上是 React-Native Android环境搭建 的全部内容， 来源链接： utcz.com/z/383016.html

回到顶部