The First Blood创建新项目

2016-08-03  本文已影响9人  CowboyBebop

之前的环境配置步骤省略。
React Native 中文网的搭建开发环境:
http://reactnative.cn/docs/0.30/getting-started.html#content
https://github.com/vczero/react-native-lesson

1,打开终端,开始React-Native开发的旅程吧。

(1)安装命令行工具:sudo npm install -g react-native-cli
(2)创建一个空项目:react-native init HelloWorld
(3)找到创建的HelloWorld项目,双击HelloWorld.xcodeproj即可在xcode中打开项目。xcodeproj是xcode的项目文件。
(4)在xcode中,使用快捷键cmd + R即可启动项目。基本的Xcode功能可以熟悉,比如模拟器的选择等。
启动完成后,你会看到React-Packger和iOS模拟器,具体的效果如下,说明你创建项目成功了。

BADB5098-64E3-42CC-900A-4E435026383C.png
如果第二步的时候出错,应该是要替换npm的镜像,http://www.ithao123.cn/content-41081.html
安装完成之后,就可以打开HelloWorld.xcodeproj了,
116453A3-D2FB-4E80-A929-88DC69C88EFD.png
EDC1AB40-EACF-4009-8DA8-8502DE25634B.png
2,Xcode里面的代码目录结构暂时不用管了,打开HelloWorld项目文件夹,找到index.ios.js文件。
index.ios.js文件就是React-Native JS 开发之旅的入口文件了。 先来个感性的认识,修改一
些文本,下一篇会解读里面的代码。用文本编辑器打开index.ios.js文件。
(1)找到代码<Text></Text>部分:
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
修改成如下:
<Text style={styles.welcome}>
React-Native入门学习
</Text>
(2)找到代码
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
修改成如下:
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'red',
}, 4933C6B8-992A-4F55-BE34-C167C0A60961.png
上一篇下一篇

猜你喜欢

热点阅读