React-Native入门指南（一）——环境配置 & Hello World

React-Native入门指南

github:https://github.com/vczero/react-native-lession

React-Native:用JavaScript开发你的原生应用，释放Native的UI体验，体验 Hybird开发效率。

最近一个星期写的文章以下，连接是github page的，其实也能够在系列博客找到相应文章：

• Lession1: Hello React-Native
• Lession2: 认识代码结构
• Lession3: css和布局
• Lession4: 学会React-Native布局（一）
• Lession5: 学会React-Native布局(二)
• Lession6: UI组件
• Lession7: JSX在React-Native中的应用

还有几篇会时刻更新：

• Lession8: 本身动手写组件
• Lession9: 模块化开发
• Lession10: 搭建项目架构
• Lession11: 源码分析

第一篇环境配置 & Hello World

1、前言

最近手头的工做繁多，有研究性的项目和系统研发，正好遇到同事离职，接手了框架的UI组件，不只须要维护和填坑，还须要开发新的功能组件。由于身在H5-Hybird的框架部门，最近团队开始尝试使用React-Native来作些东西。以前也有过开发iOS App的冲动，学了点Object-c,此次正好借此机会进入App开发，以弥补本身在Native-App上的经验不足。

2、环境配置

(1)须要一台Mac(OSX),这个是前提，建议仍是入手一本啦。
(2)在Mac上安装Xcode,建议Xcode 6.3以上版本
(3)安装node.js:https://nodejs.org/download/
(4)建议安装watchman，终端命令：brew install watchman
(5)安装flow：brew install flow
ok，按照以上步骤，你应该已经配置好了环境。

3、Hello, React-Native

如今咱们须要建立一个React-Native的项目，所以能够按照下面的步骤：
打开终端，开始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模拟器，具体的效果以下，说明你建立项目成功了。

4、改改HelloWorld

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',
},
(3)有web开发经验的你，上面的修改你必定会体会到些什么。点击模拟器，cmd + R,刷新视图,会看到以下截图：

4、恭喜你，万里长征已经走了1000步

若是有过web开发经验的你，必定以为很容易理解和学习React-Native，因此这一小步也是一大步
（1000步）。千里之行，始于此步。笔者https://github.com/vczero/react-native-lession