前言
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 FAILED
Total time: 3.514 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
从错误日志可以看出,这里是找不到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 failure
Unable to install /Users/doc/ReactNative/Demo2/android/app/build/outputs/apk/app-debug.apk
com.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 FAILED
FAILURE: 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 FAILED
Total time: 8.157 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
又改,查了文档,说是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的开发环境。