React Native入门——环境配置及Hello World

近期React Native非常火。想写点文章,这篇文章主要介绍怎样高速创建一个RN应用,包括一些以后会用到的环境配置。


0.电脑和操作系统、上网

推荐Mac,包含Air、MBP啥的都行,性能不要太差,跑的OS X即可,要是没钱的,或者不喜欢苹果系统的,推荐Linux(如Mint、Ubuntu,但不推荐CentOS这类系统),Windows临时支持不好。啥时候能支持好我再把这句话删了。

只是要注意。非OS X开发不了iOS程序。

因为React-Native依赖npm、github等工具严重,所以必需要科学上网,这里请自行解决。


1.Node.js环境

自从io.js和Node.js合并以后,非常多东西省事不少。能够从http://nodejs.orghttp://npm.taobao.org也行)下载stable版的4.2或5.0以上版本号Node,除源代码安装外。其它方式安装非常傻瓜。一直下一步就可以。

Node.js安装完毕后(安不好找其它教程),推荐利用npm安装nrm(方便切换源),假设Node.js环境较多。能够再安一个nvm。

命令:sudo npm install -g nrm,请注意以全局方式安装。实在不能科学上网的一定要使用nrm use taobao来切换淘宝的源。

这里说明一下Node.js源,国内淘宝架设了镜像,速度快,只是有些包更新不及时或没有。会导致一些奇怪的问题,所以能科学上网的,还是建议使用官网源!


2.React Native CLI

这个东西用于操作React Nativeproject(如:创建、执行等)。实际是基于Node.js的命令行工具,安装命令例如以下:sudo npm install -g react-native-cli。一定不要装成react-native了,这问题非常蛋疼。

开源的工具更新快。建议过上一段时间就执行一下这个命令更新一下。


3.必要的开发工具

你以为装了这些就搞定了?想开发APP,还能摆脱了人家的SDK?所以Xcode和Android Studio、Android SDK(Android NDK最好也装上)还是必需要有的,Xcode在App Store,Android Studio和SDK在http://developer.android.com/intl/zh-cn/sdk/index.html,当中Xcode建议7.0以上,Android Studio建议1.5以上,Android SDK建议安装包括23.0.1和比它更新版本号的Build Tools。


4.小试牛刀

找一个空文件夹。从终端打开,在这个文件夹里执行以下的命令,从而创建React-Nativeproject,比方project叫做:TestApp

注:创建期间请保持网络畅通,npm须要自己主动补全依赖包

react-native init TestApp


包不多。也就五六百个吧,在此期间,能够上上厕所、看会儿书、聊聊天神马的,这速度我也是醉了……


妈蛋。看到这个。最终是好了,事实上上面已经把执行方法写得清清楚楚了。在project根文件夹找到ios/TestApp.xcodeproj打开,点执行就可以执行iOS程序,在根文件夹执行react-native run-android就可以执行Android程序。

咱们待会儿再执行,先解决几个可能会发生的问题

第一。请先输入下面命令安装brew(没有ruby请先安装ruby)

OS X:ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Linux:ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/linuxbrew/go/install)"

第二,利用brew安装watchman

brew install watchman

至于flow。能够先不安装

好了。让咱们跑起来吧,事实上能够不依照他们的说法,过程例如以下:

1.在项目根文件夹运行npm start,启动提供jsbundle的Node.jsserver(它会默认监听本地的8081port。请确保不被占用)


稍等一会儿以后,显示以下的内容说明server已经成功跑起来了,假设报错可能是watchman等插件没有成功安装,请自行排查并安装:


2.打开ios/TestApp.xcodeproj、Android Studio打开android文件夹。待IDE载入完毕后(此时要等Android Studio)点击执行button(此时要等Xcode),眼下咱们先执行在模拟器上,后面再说真机:


左:iOS   右:Android

假设Server有问题,连不上,可能就会出现以下的界面和错误:



当然,在Android Studio和Xcode中相同是能看到报错的




好了。HelloWorldproject就OK了。是不是有点小激动呢?


转载请注明出处:http://blog.csdn.net/yuanguozhengjust/article/details/50468050

原文地址:https://www.cnblogs.com/wgwyanfs/p/7190072.html