react-native environment Configuration and Hello World

First, preface

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

Second, the Environment configuration

(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 flowok，按照以上步骤，你应该已经配置好了环境。

Three, 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模拟器，具体的效果如下，说明你创建项目成功了。

Iv. Modification of HelloWorld

The code directory structure inside Xcode is temporarily out of control, open the HelloWorld project folder and locate the Index.ios.js file. The Index.ios.js file is the entry file for the React-native JS development journey. First, a perceptual understanding, modify some text, the next one will read the code inside. Open the Index.ios.js file with a text editor. (1) Find the Code<Text></text> part: <text style={styles.welcome}> Welcome to React Native!</text> modified as follows: <text style={styles.welcome}> React-native Getting Started learning </text> (2) Find code welcome: { Fontsize:20, textAlign: ' center ',  Margin:10,}, modified as follows: Welcome: { Fontsize:20,  textAlign: ' center ',  Margin:10, color: ' Red ',}, (3) You have experience in web development, the above changes you will certainly experience something. Click Emulator, cmd + R, to refresh the view, you will see the following:             

react-native environment Configuration and Hello World