[RN] React Native 起手教學

React Native 是一框架讓 JavaScript 也能輕鬆開發 Android 及 iOS App，其效能也較接近原生 Native App。隨著技術的演進，現在開發 React Native App 手續已不像過去那樣複雜，也不一定要安裝 Android Studio 及 Xcode 了。本文將於 Windows 下配合 Android 手機(也可使用模擬器)，創建 React Native App。

前置作業

安裝 Node.JS v4 以上版本(筆者安裝 v8 版本)，安裝教學請參考此文。

步驟摘要

完成前置作業。
使用 npm 安裝 create-react-native-app 套件於全域。
於電腦與行動設備(手機或模擬器)上安裝 Expo(電腦及開發設備上都要)。
使用 create-react-native-app 創建 App 專案。
切換到專案目錄下使用 npm start 指令來直行專案，或者選擇使用 Expo 來啟動。
依照指示將該專案值入行動設備(或模擬器)中。
看到 App 畫面後，請搖晃手機至開發選單出現為止，接著選擇「Enable Hot Reloading」開始進行 App 開發。

詳細過程

步驟 1

打開終端機(命令提示字元)，使用下列指令安裝 create-react-native-app 於全域環境。

npm install -g create-react-native-app

若過程順利，將出現類似以下畫面。

步驟 2

進入到 Expo 於您的電腦中下載安裝 Expo XDE，並於您的行動裝置中也安裝 Expo (Android 版、iOS 版)。

步驟 3

於終端機(命令提示字元)中，使用下列指令建立新專案(時間需要幾分鐘)：

create-react-native-app <專案名稱>

步驟 4

使用下列兩行指令，切換至目錄中，並啟動專案：

cd AwesomeProject  
npm start

備註：除了 npm start 外，您也可以選擇使用 Expo 來啟動專案。

步驟 5

啟動完成後，請將電腦與手機連接至同一網域(同一 WiFi)，並打開 Expo 掃描畫面中之 QR Code。

備註：植入方法不僅僅 QR Code 中一種，您可依照您的需求來選擇植入方式。

步驟 6

若過程順利即可看到您的 App 畫面，並可依照指示搖晃手機，直到出現下方表單為止。選擇「Enable Hot Reloading」開始進行 App 開發。

開始開發

打開專案目錄，編輯 App.js 檔案。可先行改變 <Text> 標簽中的值，筆者程式修改如下：

import React from 'react';  
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {  
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello Makee.io!</Text>
      </View>
    );
  }
}

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

若過程順利，手機則會自動更新如下方畫面：

版本資訊

Node.JS：v8.1.2
npm：4.6.1
react-native：0.46
react-native-scripts：1.1.0

Reference

https://facebook.github.io/react-native/

Menu