React Native学习（MacOS+Android）（1）

相关学习连接，建议看中文网学习，中文网写的比较简单易懂：

React Native 中文网：

https://reactnative.cn/docs/getting-started.html

React Native官网：

https://facebook.github.io/react-native/docs/getting-started

视频学习地址：

https://www.imooc.com/learn/808

使用不同的操作系统、针对不同的目标平台，具体的步骤会有所不同。

下面的配置以macOS+Android环境配置为主，

一、配置ReactNative

必须安装的依赖有：Node、Watchman 和 React Native 命令行工具以及 JDK 和 Android Studio。

1.1 、安装node

brew install node

查看node版本：node --version;查看brew的版本：brew --version

1.2 、安装watchman（Watchman则是由 Facebook 提供的监视文件系统变更的工具，安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。）

brew install watchman

如果已经安装，只需要更新，执行命令：brew upgrade watchman

1.3、设置npm镜像，以加速后面的速度

npm config set registry https://registry.npm.taobao.org --global 
npm config set disturl https://npm.taobao.org/dist --global

1.4、Yarn、React Native 的命令行工具（react-native-cli）

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务

npm install -g yarn react-native-cli

1.5、安装完 yarn 后同理也要设置镜像源

yarn config set registry https://registry.npm.taobao.org --global 
yarn config set disturl https://npm.taobao.org/dist --global

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名替代npm install 某第三方库名。

二、Java Development Kit

React Native需要jdk1.8，暂不支持jdk1.9，在命令行输入Java -version 查看已安装jdk版本。

三、Android开发环境

安装androidStudio 配置环境，省略。。。。

注意：必须要配置ANDROID_HOME环境变量，因为React Native需要通过环境变量来了解Android SDK装在什么路径，从而正常进行编译。

第一步中需要添加的路径如下：

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

yangnanadeMacBook-Pro:AwesomeProject yangnana$ vi ~/.bash_profile //第一步，配置路径 
yangnanadeMacBook-Pro:AwesomeProject yangnana$ source $HOME/.bash_profile //第二步，使环境变量立即生效 
yangnanadeMacBook-Pro:AwesomeProject yangnana$ echo $ANDROID_HOME//第三步，检测变量设置是否正确 
/Users/yangnana/Library/Android/sdk

四、创建项目

1.1、初始化一个工程

react-native init AwesomeProject //AwesomeProject这个是工程名 
react-native init AwesomeProject --version 0.44.3 //创建知道版本的工程

1.2、启动项目，初始化完工程之后，里面有一段说明，如下：

Run instructions for iOS:
    • cd /Users/yangnana/nn/reactNative/AwesomeProject && react-native run-ios
    - or -
    • Open ios/AwesomeProject.xcodeproj in Xcode
    • Hit the Run button

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd /Users/yangnana/nn/reactNative/AwesomeProject && react-native run-android

运行在android设备上：react-native run-android

运行在ios设备上：react-native run-ios

注：第一次运行时，需要下载大量的依赖包，耗时比较长。

如果这里运行成功后，就可以尝试使用Android Studio运行了。请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。

五、将RN项目导入AndroidStudio

运行之前一定要先启动服务，执行命令 react-native start

遇到的问题总结(我这里主要是刚开始的时候遇到一些问题，后面过程都比较顺利)：

1、brew install node，遇到问题

yangnanadeMacBook-Pro:nn yangnana$ brew install node
Updating Homebrew...
Warning: node 11.14.0_1 is already installed, it's just not linked
You can use `brew link node` to link this version.
yangnanadeMacBook-Pro:nn yangnana$ sudo brew link node
Password:
//错误1:
Error: Running Homebrew as root is extremely dangerous and no longer supported.
As Homebrew does not drop privileges on installation you would be giving all
build scripts full access to your system.

解决：brew uninstall node 先卸载，然后再重新安装brew install node

安装过程中无论遇到什么问题，一般都会给出解决提示，先安照提示解决，解决完之后，再执行brew install node ，一旦遇到的问题解决不了，就可以卸载重新安装了，我就是这样解决的，最终安装成功，如下：

yangnanadeMacBook-Pro:nn yangnana$  brew install node
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).
==> Updated Formulae
joplin                                                       node

==> Downloading https://homebrew.bintray.com/bottles/node-12.0.0.high_sierra.bottle.tar.gz
==> Downloading from https://akamai.bintray.com/bf/bf0fc875064e0bae4e5e67bd3f5c70fab341f9a3fcff61179de2885045c781cf?__gd
######################################################################## 100.0%
==> Pouring node-12.0.0.high_sierra.bottle.tar.gz
==> Caveats
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d
==> Summary
?  /usr/local/Cellar/node/12.0.0: 4,505 files, 51.7MB
==> `brew cleanup` has not been run in 30 days, running now...
Removing: /Users/yangnana/Library/Caches/Homebrew/node--11.14.0_1.high_sierra.bottle.tar.gz... (13.9MB)
Removing: /Users/yangnana/Library/Caches/Homebrew/node--11.14.0.high_sierra.bottle.tar.gz... (13.9MB)
Pruned 0 symbolic links and 3 directories from /usr/local