react native學習筆記（二）

LOVE快樂發表於2018-04-03
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檔案中即可執行。

相關文章