按照传统,搭建完环境之后就可以写第一个demo了,俗称helloWorld。
一、环境搭建的地址:
http://reactnative.cn/docs/0.47/getting-started.html#content
这个地址是官方的,真的很详细,照着做就对了。
二、运行
打开终端,cd到你想要放置demo的位置,然后运行如下命令:
react-native init HelloWorld --version 0.44.3
cd HelloWorld
react-native run-ios
这里解释下,为什么要加版本号。官方给出的说法是:
注意:init命令默认会创建最新的版本,而目前最新的0.45及以上版本需要下载boost库编译。此库体积庞大,在国内即便翻墙也很难下载成功,导致很多人无法正常运行iOS项目,中文网在论坛中提供了这些库的国内下载链接。如果你嫌麻烦,又没有对新版本的需求,那么可以暂时创建0.44.3的版本。
提示:如果run-ios无法正常运行,请使用Xcode运行来查看具体错误(run-ios的报错没有任何具体信息)。
注意:这里是默认使用模拟器运行项目的,运行效果如下:
但是,使用RN调试的时候需要摇动手机,这个时候使用模拟器不是很方便,用真机比较好。如何在真机上运行呢?
真机运行链接:
http://reactnative.cn/docs/0.47/running-on-device-ios.html#content
真机运行成功之后,摇一摇手机,界面如下:
这个时候,xcode不要停掉,不要停掉,打开项目中的index.ios.js这个文件,改改文字还是可以的。
这个文件随便截两张图看看
我们虽然并不能完全看得懂每行代码的意思,但是改改文字和样式还是可以的啊。
显示效果如下:
改改样式:
显示如下:
OK,我们的第一个简易的holloworld就算完成啦。