React-Native 的HelloWorld (ios)

按照传统,搭建完环境之后就可以写第一个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的报错没有任何具体信息)。

注意:这里是默认使用模拟器运行项目的,运行效果如下:

image.png

但是,使用RN调试的时候需要摇动手机,这个时候使用模拟器不是很方便,用真机比较好。如何在真机上运行呢?
真机运行链接:
http://reactnative.cn/docs/0.47/running-on-device-ios.html#content
真机运行成功之后,摇一摇手机,界面如下:

IMG_0394.PNG

这个时候,xcode不要停掉,不要停掉,打开项目中的index.ios.js这个文件,改改文字还是可以的。
这个文件随便截两张图看看


image.png
image.png

我们虽然并不能完全看得懂每行代码的意思,但是改改文字和样式还是可以的啊。

image.png

显示效果如下:

IMG_0393.PNG

改改样式:

image.png

显示如下:

IMG_0395.PNG

OK,我们的第一个简易的holloworld就算完成啦。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,609评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,461评论 19 139
  • 1 记得是大二那个寒假的一个夜晚,我正...
    悦清风阅读 3,638评论 0 1
  • 4月20到5月20,我是一个不折不扣的金牛座。个人对星座不全相信但也挺感兴趣,金牛座的我符合大家所说的扣!倔强!强...
    lie_阅读 2,286评论 0 0
  • 启动mongodb 不启动权限认证$ mongod --config /usr/local/etc/mongod....
    4164fccdcf1c阅读 1,430评论 0 0