React Native for Android环境搭建

前言

       React Native已经出来很久了，一直想学习来着，但是由于事情太多，就一直搁置搁置，近端时间在周六周日稍稍空的时候，需求池中惊坐起，再不学习就会被时代给抛弃了。还有一个原因是后续的项目也想进行尝试一下。

环境搭建

       React Native的开发是采用JavaScript与系统原始语言，这里我们主要来说说Android的环境搭建，如果是其他的系统，请大侠异步其他地方，不过流程都是一样的。看看也无妨。

Android Studio安装

       这一句只是标题党，这里才不会讲Android Studio怎么安装呐？现在关于他的安装文章可以说是满天飞了，前面的文章也讲述了怎么安装，可以去前面的文章看看。后续的内容我都假装你已经安装了Android Studio，就算你没有安装，我也认为你装了。

准备工作

       环境搭建前，我们要做很多准备工作，我们需要Android Studio，不过我认为你已经有了，node.js, React Native命令行工具，Watchman。

node.js

       首先我们来进行node.js安装，node的版本只要在4.0及以上。在命令行中输入如下命令：

brew install node (node > 4.0)

       不要问我brew是什么，brew是一个Mac上的安装工具，正常情况下，等待一下就安装好了，如果你不确认你是否安装可以输入以下命令：

brew list

       这里会列出一系列你用brew安装的工具，这里你可能已经安装了，但是版本比较老，你需要输入以下的命令：

brew update

       这样会将你的工具一个一个的进行升级，目前node.js版本是6.x，好了这里我的node.js就安装好了。

watchman

       Watchman 是 facebook 的一个开源项目，它开源用来监视文件并且记录文件的改动情况，当文件变更它可以触发一些操作,例如执行一些命令等等，这里在命令行输入以下命令：

brew install watchman

       等待一会，watchman就安装好了

ps：安装的快慢可能跟你的网络有关，比如有翻翻墙啥的

React Native安装

       前面的工具安装完成了后，就开始安装React Native了，React Native需要采用npm来安装，这里主要安装的是React Native的命令行工具，my god npm又是个啥！一会冒一个不清楚的东西。

       先吃一个定心丸，我们不需要单独安装npm了，node里面附带了npm，这样我们就可以用它来安装React Native的命令行界面了。不用管他是啥了，会用就行，我们接着在命令终端输入以下命令：

npm install -g react-native-cli

       记得不要输错了命令，可以别写成了react-native，之后你会看到消息输出，我们就等待等待。一般是不会出什么错误的。但是如果真的遇到错误，比如以下错误：

a：权限错误

sudo npm install -g react-native-cli

输入以上的命令，这里我们需要对他提升权限来进行执行

b：connot find module ‘npmlog’

curl -0 -L http://npmjs.org/install.sh | sudo sh

先执行上述的命令，之后在执行安装的命令。

创建工程

       进过前面的努力，我们的环境就已经算搭建起来了，环境搭建成功我们就算成功了一般，趁热打铁，我们来开始来开始进行开发了。

新建工程

       这里我们用命令来进行工程创建，输入以下的命令：

       先初始化工程：

react-native init AwesomeProject

       AwesomeProject就是你的工程名，可以是Hello啥的，这一句执行完成后会生成如下文件，这一步可能执行的时间稍稍会久一点：

       从上图我们可以看到这默认生成一个android工程，一个ios工程，还有两个index文件，一个android的js文件，一个ios的js文件，以及一个node_modules文件夹和package.json文件，这两个都是运行所需要的文件。

       之后进入到工程目录下：

cd AwesomeProject

运行工程

       上面我们已经初始化了工程，这里我们就可以运行工程了。运行工程肯定需要一个终端，这里我们可以选择真机或者模拟器，如果你有真机，那就直接选择真机就好了。输入以下命令进行运行：

react-native run-android

       不过我成功的失败了，提示了如下错误：

* What went wrong:A problem occurred evaluating project ':app'.> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.BUILD FAILEDTotal time: 3.514 secsCould 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 haveset up your Android development environment:https://facebook.github.io/react-native/docs/android-setup.html

       从错误日志可以看出，这里是找不到sdk了，打开工程可以发现这里没有一个local.properties的文件，那我们就创建这个文件，指定sdk，获取从其它工程拷贝一个就行了。

       所有的都准备好了，这次应该好了吧！我拉个擦，简直too yang啊！还是错误，前面的日志感觉要成功了，最后一点哇咔咔，失败了。错误如下：

Installing APK 'app-debug.apk' on 'vivo X6Plus D - 5.1'05:34:15 E/824227006: Error while uploading app-debug.apk : Unknown failureUnable to install /Users/doc/ReactNative/Demo2/android/app/build/outputs/apk/app-debug.apkcom.android.ddmlib.InstallException: Unable to upload some APKs    at com.android.ddmlib.Device.installPackages(Device.java:920)    at com.android.builder.testing.ConnectedDevice.installPackages(ConnectedDevice.java:113)    at com.android.builder.testing.ConnectedDevice$installPackages$0.call(Unknown Source)    at org.codehaus.groovy.runtime.callsite.CallSiteArray.defaultCall(CallSiteArray.java:45)    at org.codehaus.groovy.runtime.callsite.AbstractCallSite.call(AbstractCallSite.java:108)    at org.codehaus.groovy.runtime.callsite.AbstractCallSite.call(AbstractCallSite.java:128)    at com.android.build.gradle.internal.tasks.InstallVariantTask.install(InstallVariantTask.groovy:119)    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)    at java.lang.reflect.Method.invoke(Method.java:498)    at org.gradle.internal.reflect.JavaMethod.invoke(JavaMethod.java:75)    at org.gradle.api.internal.project.taskfactory.AnnotationProcessingTaskFactory$StandardTaskAction.doExecute(AnnotationProcessingTaskFactory.java:226)    at org.gradle.api.internal.project.taskfactory.AnnotationProcessingTaskFactory$StandardTaskAction.execute(AnnotationProcessingTaskFactory.java:219)    at org.gradle.api.internal.project.taskfactory.AnnotationProcessingTaskFactory$StandardTaskAction.execute(AnnotationProcessingTaskFactory.java:208)    at org.gradle.api.internal.AbstractTask$TaskActionWrapper.execute(AbstractTask.java:589)    at org.gradle.api.internal.AbstractTask$TaskActionWrapper.execute(AbstractTask.java:572)    at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeAction(ExecuteActionsTaskExecuter.java:80)    at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeActions(ExecuteActionsTaskExecuter.java:61)    at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.execute(ExecuteActionsTaskExecuter.java:46)    at org.gradle.api.internal.tasks.execution.PostExecutionAnalysisTaskExecuter.execute(PostExecutionAnalysisTaskExecuter.java:35)    at org.gradle.api.internal.tasks.execution.SkipUpToDateTaskExecuter.execute(SkipUpToDateTaskExecuter.java:64)    at org.gradle.api.internal.tasks.execution.ValidatingTaskExecuter.execute(ValidatingTaskExecuter.java:58)    at org.gradle.api.internal.tasks.execution.SkipEmptySourceFilesTaskExecuter.execute(SkipEmptySourceFilesTaskExecuter.java:42)    at org.gradle.api.internal.tasks.execution.SkipTaskWithNoActionsExecuter.execute(SkipTaskWithNoActionsExecuter.java:52)    at org.gradle.api.internal.tasks.execution.SkipOnlyIfTaskExecuter.execute(SkipOnlyIfTaskExecuter.java:53)    at org.gradle.api.internal.tasks.execution.ExecuteAtMostOnceTaskExecuter.execute(ExecuteAtMostOnceTaskExecuter.java:43)    at org.gradle.api.internal.AbstractTask.executeWithoutThrowingTaskFailure(AbstractTask.java:310)    at org.gradle.execution.taskgraph.AbstractTaskPlanExecutor$TaskExecutorWorker.executeTask(AbstractTaskPlanExecutor.java:79)    at org.gradle.execution.taskgraph.AbstractTaskPlanExecutor$TaskExecutorWorker.processTask(AbstractTaskPlanExecutor.java:63)    at org.gradle.execution.taskgraph.AbstractTaskPlanExecutor$TaskExecutorWorker.run(AbstractTaskPlanExecutor.java:51)    at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor.process(DefaultTaskPlanExecutor.java:23)    at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter.execute(DefaultTaskGraphExecuter.java:88)    at org.gradle.execution.SelectedTaskExecutionAction.execute(SelectedTaskExecutionAction.java:37)    at org.gradle.execution.DefaultBuildExecuter.execute(DefaultBuildExecuter.java:62)    at org.gradle.execution.DefaultBuildExecuter.access$200(DefaultBuildExecuter.java:23)    at org.gradle.execution.DefaultBuildExecuter$2.proceed(DefaultBuildExecuter.java:68)    at org.gradle.execution.DryRunBuildExecutionAction.execute(DryRunBuildExecutionAction.java:32)    at org.gradle.execution.DefaultBuildExecuter.execute(DefaultBuildExecuter.java:62)    at org.gradle.execution.DefaultBuildExecuter.execute(DefaultBuildExecuter.java:55)    at org.gradle.initialization.DefaultGradleLauncher.doBuildStages(DefaultGradleLauncher.java:149)    at org.gradle.initialization.DefaultGradleLauncher.doBuild(DefaultGradleLauncher.java:106)    at org.gradle.initialization.DefaultGradleLauncher.run(DefaultGradleLauncher.java:86)    at org.gradle.launcher.exec.InProcessBuildActionExecuter$DefaultBuildController.run(InProcessBuildActionExecuter.java:90)    at org.gradle.tooling.internal.provider.ExecuteBuildActionRunner.run(ExecuteBuildActionRunner.java:28)    at org.gradle.launcher.exec.ChainingBuildActionRunner.run(ChainingBuildActionRunner.java:35)    at org.gradle.launcher.exec.InProcessBuildActionExecuter.execute(InProcessBuildActionExecuter.java:41)    at org.gradle.launcher.exec.InProcessBuildActionExecuter.execute(InProcessBuildActionExecuter.java:28)    at org.gradle.launcher.exec.DaemonUsageSuggestingBuildActionExecuter.execute(DaemonUsageSuggestingBuildActionExecuter.java:50)    at org.gradle.launcher.exec.DaemonUsageSuggestingBuildActionExecuter.execute(DaemonUsageSuggestingBuildActionExecuter.java:27)    at org.gradle.launcher.cli.RunBuildAction.run(RunBuildAction.java:40)    at org.gradle.internal.Actions$RunnableActionAdapter.execute(Actions.java:169)    at org.gradle.launcher.cli.CommandLineActionFactory$ParseAndBuildAction.execute(CommandLineActionFactory.java:237)    at org.gradle.launcher.cli.CommandLineActionFactory$ParseAndBuildAction.execute(CommandLineActionFactory.java:210)    at org.gradle.launcher.cli.JavaRuntimeValidationAction.execute(JavaRuntimeValidationAction.java:35)    at org.gradle.launcher.cli.JavaRuntimeValidationAction.execute(JavaRuntimeValidationAction.java:24)    at org.gradle.launcher.cli.CommandLineActionFactory$WithLogging.execute(CommandLineActionFactory.java:206)    at org.gradle.launcher.cli.CommandLineActionFactory$WithLogging.execute(CommandLineActionFactory.java:169)    at org.gradle.launcher.cli.ExceptionReportingAction.execute(ExceptionReportingAction.java:33)    at org.gradle.launcher.cli.ExceptionReportingAction.execute(ExceptionReportingAction.java:22)    at org.gradle.launcher.Main.doAction(Main.java:33)    at org.gradle.launcher.bootstrap.EntryPoint.run(EntryPoint.java:45)    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)    at java.lang.reflect.Method.invoke(Method.java:498)    at org.gradle.launcher.bootstrap.ProcessBootstrap.runNoExit(ProcessBootstrap.java:54)    at org.gradle.launcher.bootstrap.ProcessBootstrap.run(ProcessBootstrap.java:35)    at org.gradle.launcher.GradleMain.main(GradleMain.java:23)    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)    at java.lang.reflect.Method.invoke(Method.java:498)    at org.gradle.wrapper.BootstrapMainStarter.start(BootstrapMainStarter.java:30)    at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:127)    at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61):app:installDebug FAILEDFAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':app:installDebug'.> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Unable to upload some APKs* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.BUILD FAILEDTotal time: 8.157 secsCould 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 haveset up your Android development environment:https://facebook.github.io/react-native/docs/android-setup.html

       又改，查了文档，说是gradle版本的问题，默认生成的1.3.1，我降到了1.2.3，再一次运行，god bless，运行界面如下：

       成功的运行了工程。我实在是不死心，我再一次改gradle版本，这次改到了2.0.0，成功的失败了。

换一种方式运行

       如果命令行运行，一直不行怎么办？我们还可以选择用Android Studio来打开工程，直接用Android Studio连真机运行，这样就可以成功的运行了。

修改内容

       上面我们看到已经显示了内容，显示的内容是从哪儿来的。显示的内容是从index.android.js中获取的。

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';export default class Demo2 extends Component {  render() {    return (      <View style={styles.container}>        <Text style={styles.welcome}>          Welcome to React Native!        </Text>        <Text style={styles.instructions}>          To get started, edit index.android.js        </Text>        <Text style={styles.instructions}>          Double tap R on your keyboard to reload,{'\n'}          Shake or press menu button for dev menu        </Text>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});AppRegistry.registerComponent('Demo2', () => Demo2);

        我们可以更改js里面的内容，这样就自动切换了内容，如果需要重新加载内容，可以晃动手机点，会在手机上弹窗一个菜单列表，选择reload就可以重新加载了。

后续

       上面我看到了显示的内容是js来写的，Android Studio对js的支持是很差的，那js又用上面IDE来开发，下一篇我们就来搭建js的开发环境。