react-native macOs 自己搭建开发环境纪实 Android 环境

react-native好用,环境难搭,最近几天被搭建环境的事情搞的焦头烂额,还好最后也是搭建完成了。期间遇到了各种坑,虽然最后都趟过去了,可是能记住的很少。现在捡着能记住的写个攻略,希望能帮助到需要搭建这个环境的小伙伴,同时自己下次再搭的时候就不用再去翻资料了。

先说一下我的系统是mac os 10.14.5 ,我目标是编写android系统的apk,开发android所需的环境是比较复杂的,起码比开发ios app要复杂一些。

这里大部分方法是根据官方给出的搭建方法,一小部分是自己趟出来的经验,有信心的兄弟,可以直接看官网的搭建方法。

搭建环境所需软件:

1、node  版本v10以上

2、watchman

3、java Development kit (JDK)  这个需要版本是 java8,但是强烈推荐不要使用其他的版本。

4、Android Studio

安装第一步 : node 和 wathcman


node和watchman直接使用homebrew安装就好

brew install node
brew install watchman

 [Watchman](https://facebook.github.io/watchman) 则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)。

安装完node以后需要安装一个react-native的命令行工具 yarn,yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
安装直接使用:

npm install -g yarn react-native-cli

安装完以后就可以使用yarn 来歹徒npm命令了, 需要加载什么第三方苦,就可以直接使用 yarn add xxxxx,yarn link xxxxx, 这个在使用中会经常用到,各位施主可以在使用的时候开悟。

安装第二步: jdk8

mac os 系统自带的是jdk1.6,就是java6,这明显是支持不了的,所以需要升级,这个时候就不要使用homebrew了,因为使用brew安装升级java会一口气升级到java12,还是会有兼容性问题,所以为了安逸,不如就升级到jdk8就可以了。

这是官方的说明:React Native 需要 Java Development Kit [JDK] 1.8(暂不支持 1.9 及更高版本)

现在自己的系统终端工具中看看自己java的版本:

java -version

 
如果是1.8版本的话,恭喜,折磨的第一步就算过了,如果是其他版本,那就更着下面的步骤来吧。。。。

首先要到官网上去下载jdk1.8安装包,mac就下载.dmg文件就行了,现在下载需要先注册,登录后才可以,有点耐心吧,都免费下了,填写一点资料怕啥,反正又不需要你写真的。

注册成功后,去找java se development kit 8 download,下载macOS-x64.dmg。

下载完成后进行安装,点点点就行了,安装完成后,需要配置java的系统变量。

我们安装的java在 /Library/Java/JavaVirtualMachines 目录下。

jdk的真实目录在/Library/Java/JavaVirtualMachines/jdk1.8.xxxx.jdk/Contents/Home,将这个目录添加到系统变量的JAVA_HOME中:

方法就是使用vim打开 ~/.bash_profile文件

vim  ~/.bash_profile


然后复制下面的内容添加到这个文件中:

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.xxxx.jdk/Contents/Home


保存退出后使用 source ./~bash_profile是设置生效,然后在终端中输入 java -version,查看版本,如果显示是 “java version 1.8xxx” 就算安装成功了。

切记是1.8版本,为了不惹麻烦,安全开始写helloworld,请不要作死的使用其他版本。

安装第三步: android studio

其实这个就是一个android的ide,下载可以在 [Download Android Studio](https://developer.android.com/studio/index.html)下载,安装也是点点点就可以了。## 安装界面中选择”Custom"选项,确保选中了以下几项:

* Android SDK

* Android SDK Platform

* Performance (Intel ® HAXM)

* Android Virtual Device

安装完成后这只是第一步,接下来要对 android sdk 和sdk-tools进行一些配置,这个地方十分关键,如果配置不好的话,会出现很多问题。

SDK Manager 还在 Android Studio 的”Preferences”菜单中找到。具体路径是:

*Appearance & Behavior*→*System Settings*→*Android SDK*。

在 SDK Manager 中选择”SDK Platforms”选项卡,然后在右下角勾选”Show Package Details”。展开Android 9 (Pie)选项,确保勾了下面这些组件(重申你必须使用稳定的工具,否则可能都看不到这个界面):

* Android SDK Platform 28

* Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

然后点击”SDK Tools”选项卡,同样勾中右下角的”Show Package Details”。展开”Android SDK Build-Tools”选项,确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。

最后点击”Apply”来下载和安装这些组件。

下载安装完以后需要配置一下环境变量,添加以下内容到 ~/.bash_profile文件中

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

然后使用 

source ~/.bash_profile

使配置生效

到这里安装就全部完成了,按照这个安装完,写个helloworld是没啥问题的。

还有一个问题是android的gradle 文件链接错误的问题,我在使用

react-native run-android 


时候遇到的。


其实这个文件是可以下载的,于是我将这个文件下载下来,放到自己的服务器上,然后修改  :

android/gradle/wrapper/gradle-wrapper.propertie中的distributionUrl 中的值,之后就没有遇到问题了。

感觉react-native的使用者还是不多,需要查找一些资料的时候,能找到很少,大部分是英文的材料,和出问题的时候英文的解答。

在安装的时候也是一样,各种问题,各种版本不兼容,一样是一边安装,一边去查资料,而且很多软件是需要去墙外下载的。

所以使用react-native是有一定门槛的,不是开发的门槛,是安装环境与耐心的门槛,祝大家一切都顺利,坚持到底。

 

你可能感兴趣的:(react-native,react-native,环境搭建,android,js)