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文件中便可運行。