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

下面讲一下 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 来启动打包器。

发表评论

电子邮件地址不会被公开。 必填项已用*标注