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