JavaScript 全栈:React-Native 初探之Hello World

2015年4月3日 283点热度 0人点赞 0条评论

导读:Facebook F8大会发布 React-Native ,可以基于 JavaScript 进行 Native iOS 应用开发,到底如何操作,以及实践官方的实例,快来看看吧。

下面讲一下 React Native 的安装实践过程。

安装非常简单,根据手册,我们需要在 OS X 系统上来操作。

1、第一步,安装好 Xcode

2、第二步,安装好,homebrew,这是Mac上一个非常方便的软件安装工具,类似于Centos 上的 yum。

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

3、第三步,安装依赖软件。

brew install node

brew install --HEAD watchman

brew install flow

5、第四步,安装react-native 命令行程序。

npm install -g react-native-cli


6、安装成功后,可以新建一个项目

react-native init AwesomeProject


7、生成这个项目,就看到了如下的输出

图片

8、生成的项目目录如下:

图片

9、在Xcode 中打开,如下

图片

10、运行,首先弱出来一个打包工具,打包器监听了端口8081,并得到如下结果。

图片

11、模拟器中运行结果。

图片

12、那么,我们怎么修改呢,搜索Welcome 在代码中都没有发现,原来在项目目录下有一个index.ios.js

加到项目里面,我们就可以修改代码了。

图片

13、界面是CSS控制的!当然,语法上跟我们在HTML5中所接触的语法稍有不同。调整了一下如下:

图片

14、重新运行,这里重新运行,不是说要停止项目重新运行,只需要在模拟器中,执行快捷键Command+R,就可以得到如下运行结果,是不是爽呆了。

图片
15、到这里,我们的Hello World 就做完成了。官方的github也提供了例子,包括有一个类似于UICatalog的例子,UIExplorer,也能运行起来,需要注意的是,我们也需要手动在项目目录下启动react-native start 来启动打包器。

图片

图片

结语:简单的 React-Native就实践到这里,正是由于大公司和开源社区的协同努力,JavaScript已经真正成为了横跨Web端、后端和移动端的全栈开发语言,优才网也将推出JavaScript 全栈工程师培训,敬请期待。



图片
(长按二维码,即可关注优才网微信公众平台)

上优才,学全栈,获得20万年薪工作机会。点击阅读原文了解更多


12490JavaScript 全栈:React-Native 初探之Hello World

root

这个人很懒,什么都没留下

文章评论