react native学习笔记（二）

编写Hello World

React Native看起来很像React，只不过其基础组件是原生组件而非web组件。要理解React Native应用的基本结构，首先须要了解一些基本的React的概念，好比JSX语法、组件、state状态以及props属性。若是你已经了解了React，那么还须要掌握一些React Native特有的知识，好比原生组件的使用。这篇教程能够供任何基础的读者学习，无论你是否有React方面的经验。

让咱们开始吧！

Hello World

根据历史悠久的“传统”，咱们也来写一个“Hello World”：

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

// 注意，这里用引号括起来的'HelloWorldApp'必须和你init建立的项目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

你能够新建一个项目，而后用上面的代码覆盖你的App.js文件，而后运行看看。

那这段代码是什么意思呢？

初看这段代码，可能以为并不像JavaScript——没错，这是“将来”的JavaScript.

首先你须要了解ES2015 （也叫做ES6）——这是一套对JavaScript的语法改进的官方标准。可是这套标准目前尚未在全部的浏览器上完整实现，因此目前而言web开发中还不多使用。React Native内置了对ES2015标准的支持，你能够放心使用而无需担忧兼容性问题。上面的示例代码中的import、from、class、extends、以及() =>箭头函数等新语法都是ES2015中的特性。若是你不熟悉ES2015的话，能够看看阮一峰老师的书，还有论坛的这篇总结。

示例中的这一行<Text>Hello world!</Text>恐怕不少人看起来也以为陌生。这叫作JSX——是一种在JavaScript中嵌入XML结构的语法。不少传统的应用框架会设计自有的模板语法，让你在结构标记中嵌入代码。React反其道而行之，设计的JSX语法倒是让你在代码中嵌入结构标记。初看起来，这种写法很像web上的HTML，只不过使用的并非web上常见的标签如<div>或是<span>等，这里咱们使用的是React Native的组件。上面的示例代码中，使用的是内置的<Text>组件，它专门用来显示文本。

组件与AppRegistry

上面的代码定义了一个名为HelloWorldApp的新的组件（Component），而且使用了名为AppRegistry的内置模块进行了“注册”操做。你在编写React Native应用时，确定会写出不少新的组件。而一个App的最终界面，其实也就是各式各样的组件的组合。组件自己结构能够很是简单——惟一必须的就是在render方法中返回一些用于渲染结构的JSX语句。

AppRegistry模块则是用来告知React Native哪个组件被注册为整个应用的根容器。你无需在此深究，由于通常在整个应用里AppRegistry.registerComponent这个方法只会调用一次。上面的代码里已经包含了具体的用法，你只需整个复制到index.ios.js或是index.android.js文件中便可运行。