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源,国内淘宝架设了镜像,速度快,不过有些包更新不及时或没有,会导致一些奇怪的问题,所以能科学上网的,还是建议使用官网源!


扫描二维码关注公众号,回复: 1115466 查看本文章

2.React Native CLI

这个东西用于操作React Native工程(如:创建、运行等),实际是基于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-Native工程,比如工程叫做:TestApp

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

react-native init TestApp


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


妈蛋,看到这个,终于是好了,其实上面已经把运行方法写得清清楚楚了,在工程根目录找到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.js服务器(它会默认监听本地的8081端口,请确保不被占用)


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


2.打开ios/TestApp.xcodeproj、Android Studio打开android目录,待IDE加载完成后(此时要等Android Studio)点击运行按钮(此时要等Xcode),目前咱们先运行在模拟器上,后面再说真机:


左:iOS   右:Android

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



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




好了,HelloWorld工程就OK了,是不是有点小激动呢?


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

猜你喜欢

转载自blog.csdn.net/yuanguozhengjust/article/details/50468050