美文网首页
The First Blood创建新项目

The First Blood创建新项目

作者: CowboyBebop | 来源:发表于2016-08-03 12:02 被阅读9次

    之前的环境配置步骤省略。
    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

    相关文章

      网友评论

          本文标题:The First Blood创建新项目

          本文链接:https://www.haomeiwen.com/subject/blpqsttx.html