React Native入门（二）之Hello World（AwesomeProject）项目介绍

前言

在上一篇博客中，我们介绍了RN环境的搭建，以及遇到的各种坑，历经千辛万苦，终于算是完成了！也生成了一个项目，下面呢，我们就来简单了解一下生成的这个项目及相关的问题

项目目录

我们使用react-native init AwesomeProject命令，生成了一个AwesomeProject的项目，这个项目呢就算是我们RN的第一个Hello World项目了！我们打开这个项目：

整个项目的目录就如上图所示。

• andoid/ios 各自存放了一个相关平台的工程 project，这个目录中的内容我们再熟悉不过了！（iOS另说，哈哈哈！）
• node_modules 里面是自动生成的 node 依赖之类的文件，通过读取 package.json里的配置来生成。
• index.android.js/index.ios.js这两个文件分别对应两个平台，也是比较核心的内容，我们的RN应用中，这些js脚本扮演很重要的角色！说白了，就是开发一个个的js脚本！

index.android.js

下面我们来看一下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';

export default class AwesomeProject 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('AwesomeProject', () => AwesomeProject);

我是没有前端基础的，但是上面的代码，还是大概知道表达的什么意思！

在查阅了一些资料后，上边的代码是ES2015（也叫作ES6）的语法——这是一套对JavaScript的语法改进的官方标准。但是这套标准目前还没有在所有的浏览器上完整实现，所以目前而言web开发中还很少使用。React Native内置了对ES2015标准的支持，你可以放心使用而无需担心兼容性问题。上面的示例代码中的import、from、class、extends、以及() =>箭头函数等新语法都是ES2015中的特性。

关于学习了解ES2015的话，可以看看阮一峰老师的书：
ECMAScript 6 入门
还有论坛的这篇总结：
React/React Native 的ES5 ES6写法对照表
对我们了解ES6非常有帮助，也有助于阅读RN中的代码！

其实上边的import...from...，类似java中的导包，意思就是从...中导入...，这样就很好理解了！

好了，接着看中间一段代码，对于class...extends...，这个也跟java类似！然后<View>标签包含3个<Text>标签，跟我们平时写布局的时候也差不多，就是一般的xml。
只不过，这里这些xml标签是在js脚本中嵌套的，这叫做JSX——是一种在JavaScript中嵌入XML结构的语法。（涨姿势了！）
在中文官网中有讲到，很多传统的应用框架会设计自有的模板语法，让你在结构标记中嵌入代码。React反其道而行之，设计的JSX语法却是让你在代码中嵌入结构标记。初看起来，这种写法很像web上的HTML，只不过使用的并不是web上常见的标签如<div>或是<span>等，这里我们使用的是React Native的组件。上面的示例代码中，使用的是内置的<Text>组件，它专门用来显示文本。

下面就到两个比较陌生的东西Component和AppRegistry。
Component组件，我的理解就类似一个布局，这个布局可以很复杂，也可以很简单，我们可以使用class...extends Component来定义一个我们自己的组件，当然应用是由一个个不同的组件组成，唯一必须的就是在render方法中返回一些用于渲染结构的JSX语句，也就是上边代码中

render() {
    return (
      //...jsx语句（就是我们熟悉的布局）
    );
}

好了下面说AppRegistry：
AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。你无需在此深究，因为一般在整个应用里AppRegistry.registerComponent这个方法只会调用一次。(这里我们先记着要这样用就行了！)，就是最后一段代码

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

需要注意的一点就是代码中单引号内的内容是我们init项目的时候的项目名称，() =>后边的是我们自己定义的组件名称，别弄混了！

另外这里的箭头函数是ES6中新增的，() => AwesomeProject相当于：

function() { return AwesomeProject }

这里先了解就可以了！

接下来我们看第三段代码：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    ...
  },
  instructions: {
    ...
  },
});

这个不就是我们在Android中写的style嘛，里边是需要设置的view的各个属性，然后在引用的时候，这样写：

<View style={styles.container}>
    <Text style={styles.welcome}>
        .........
    </Text>
</view>

还是比较容易理解的，在标签内使用style={声明的变量.具体的style名字},就可以引用我们定义的style了！

结语

好了本篇关于RN初始化的Hello World项目进行了简单的分析介绍，算是入了门了，接下来就正式进入到RN相关内容的学习中了，我们下篇再见！