React-Native学习

React-Native中文官网：http://reactnative.cn/docs/0.47/getting-started.html#content

一、环境搭建

准备：

python2，下载地址：https://www.python.org/download/releases/2.7.2/

nodeJs,下载地址：http://nodejs.cn/

除了是自己下载安装python2和nodeJs，基本上都是参照官网流程

1、配置nodejs镜像

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

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

npm install -g yarn react-native-cli

3、配置Yarn镜像

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

4、AndroidStudio安装过程省略，Android原生开发，AndroidStudio安装是基本功

5、ANDROID_HOME环境变量配置

路径配到sdk根目录

例如：我的sdk直接在C盘sdk目录下

sdk所在目录 ANDROID_HOME配置

最好是两个都配置下

6、sdk-tools环境变量配置，这个原生开发也是必备的

到这里，环境搭建基本上就已经完成了

二、Hello_World

准备：

先打开一个模拟器，或者连接上真机

进入到自己平时工作空间目录打开cmd

1、新建一个HelloWorld项目

react-native init HelloWorld

创建HelloWorld项目
项目创建完成

2、运行项目

cd HelloWorld
react-native run-android

这个时候会自动开启一个node的窗口，不要把它关闭咯

运行项目

项目跑起来就可以设备上看到下面这个界面，我用的是Android 7.1模拟器

3、添加我们自己的HelloWorld问候语

找到index.android.js文件，打开进行修改

改动js文件

再次打开cmd运行项目，运行成功后，发现它不像AndroidStudio一样会自动打开app，需要手动打开，看到我们刚刚修改的内容显示出来了

react-native run-android

三、遇到的问题

前面环境搭建基本上没什么问题，按照流程来还是能很顺利的走完，在运行项目时，遇到过问题，异常信息如下

1、执行react-native run-android时遇到下面的错误

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> java.lang.NullPointerException (no error message)

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug
option to get more log output.

BUILD FAILED

Total time: 5.658 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

截图：

解决方案：

讲真，异常信息，也没看出具体什么问题，但是打开创建好的HelloWorld工程，可以看到有我们熟悉的目录结构(AndroidStudio工程项目结构)，直接就用AndroidStudio打开编译，编译完成后AndroidStudio上面运行

AndroidStudio打开HelloWorld项目

使用AndroidStudio打开项目

这个过程还挺顺利的，很快AndroidStudio就把项目编译完成了

在AndroidStudio上成功运行

这时看到自动打开的node窗口也发生了变化