第一个React Native应用

一、应用的创建

1、创建应用

    进入管理控制台，输入命令：react-native  init   HelloWorld  , 不用说HelloWorld 是我们要创建的应用名称。如图可以看到一些创建完成的提示信息，例如用什么命令启动应用，包括IOS和Android的。

2、进入应用

 cd  HelloWorld  ,必须进入应用才能执行步骤3的启动命令，不然命令都找不到要启动的对象，还怎么启动呢？

3、启动应用

在我们创建完成应用后有提示信息如何启动应用，其中启动安卓的为： react-native run-android

    这个过程由一堆的提示信息，提示编译测过程、安装机器信息等，同时在我们刚执行命令的时候又弹出一个cmd窗口，该窗口为包管理器窗口，显示应用打包信息。

一切完成后便可以在我们的模拟器上看到应用的样子啦。。。。

    这个应用是内容是哪来的呢？其实这个是默认的内容样式，命令 react-native init (应用名称) 的时候，会获取官方库中的应用内容，就是下载下来工程文件。

    从该页面显示内容来看我们在工程文件中的写的代码要想实时显示到机器上，只需要点击两次  R 键就行。下面我们对应用进行分析。

二、应用的分析

1、工程结构分析

    使用WebStorm打开应用工程，可以看到应用目录结构：

    

    使用react native的方法创建的应用为什么能在安卓和苹果设备上运行呢？和原生的应用的区别是什么？

    其实我们可以将react native 这种创建应用的形式看成一个开发原生应用的“马甲”，使用JS的方法创建应用，其实底层的react -native框架负责将应用编译成对应的原生应用，这也就是在工程目录中有 android 和 ios 两个文件的原因，这两个文件夹里面就是编译后生成的原生应用工程。实际在我们执行 react-native run-android 或 react-native run-ios 的时候是利用的这两个目录下文件。

    文件夹 node_modules 里面放的是react-native框架依赖的组件，我们在实际应用中中需要使用各种各样的组件，就是从这里面获取的。

    剩下的文件是一些配置文件，package.json 是工程包配置信息，最最重要的莫属于 index.android.js 和 index.ios.js 文件了。他们分别是 android 和 ios 应用的启动页面，也就是开始页面，它们是对应的应用的入口文件。

2、入口文件分析

    我们看到的初始界面的内容就是index.android.js 中所描绘的内容，我们不妨 看一下：  

 /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';
class HelloWorld extends Component {
    render() {
        return (
          <View style={styles.container}>
              <Text style={styles.welcome}>
                  Welcome to React Native!
              </Text>
              <Text style={styles.instructions}>
                  To get started, edit index.android.js
              </Text>
              <Text style={styles.instructions}>
                  Double tap R on your keyboard to reload,{'\n'}
                  Shake or press menu button for dev menu
              </Text>
          </View>
     );
  }
}

const styles = StyleSheet.create({
        AppRegistry,
        StyleSheet,
        Text,
        View
} from 'react-native';
class HelloWorld extends Component {
      render() {
      return (
      <View style={styles.container}>
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            <Text style={styles.instructions}>
                  To get started, edit index.android.js
            </Text>
            <Text style={styles.instructions}>
                  Double tap R on your keyboard to reload,{'\n'}
                  Shake or press menu button for dev menu
            </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
  },
  welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
  },
  instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
  },
});

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

    看起来很多内容，但是核心的东西 不是太多，最开始的一看就是 注释就不用多说了，接着两行  import 的代码，我们的react native 是基于 react 的，因此第一个 import  的作用就是从 react 的框架引入 核心的 react 及 componet组件。而第二个 import 作用是从 react-native 引入原生组件，例如里面的Text 就是文本组件，我们在下面的代码中可以很容易的看到使用了 Text组件，注意我们在实际使用的组件都需要现在这里引入。

     class HelloWorld extends Component {} 这个是核心的内容，里面渲染的东西就是我们在界面看到的内容。刚看代码内容，可能很不习惯，这是因为我们在进行web开发的时候，使用的方式是在HTML代码中嵌入 js代码，而这里却是反过来的，是在 js  代码中嵌入HTML代码。这里就是用js 代码描绘了一个组件，就叫 HelloWorld，render()负责描绘内容，内部需要利用 return 返回所描绘的组件。可以看到组件就是我们熟悉的HTML代码，利用Text绘制文本。需要注意的是 <Textstyle={styles.welcome}>   里面使用了样式，在react 中是使用样式，需要用{}将样式包围起来，里面是 js 变量或表达式，所以有的时候由于 js变量或者表达式外层也包围了一层 {} ,会出现 {{......}} 双层的中括号的情况，只不过它们含义不同。另外我们自定义的组件都需要集成自系统组件 Component  。

    const styles = StyleSheet.create({}) 的作用就是描绘样式，这个在上面的自定义组件中使用了。需要注意的是组件内部的属性需要按照驼峰式写法，例如  backgroundColor: '#F5FCFF'。 我们的样式同时被声明为const类型，全局静态变量，所以我们在使用中可以直接使用styles.container 的方法引用样式。

    最后的  AppRegistry.registerComponent('HelloWorld',() => HelloWorld);  作用就是将我们声明的组件注册到系统中，这里需要注意的是最后指向的组件必须和我们创建的应用名称一致。