React Native 系列教學(一)

在開始前 同學可以看看 這篇  Expo 是天堂還是地獄?
以選擇適合自己的模式

老師以最後要上架到 Apple / Android 商店為教學主軸
所以就先以 react-native init 的方式來創建專案

同學若還沒購買電腦 往後想要開發 IOS / Android 的話
強烈建議 可以購買 Mac

因為Mac 目前可以開發雙系統 APP
Windows 除非使用 Expo 不然短期內 還是只能開發 Android


React Native Getting Started

1.安裝依賴

Installing dependencies

You will need Node, Watchman, the React Native command line interface, and Xcode.

這是開發 iOS 專案 需要的項目

1:Node
2:Wahchman (非必需, 但又沒道理不裝@@)
3:React Native command line interface(CLI)
4:Xcode

來說明一下:

1.Node - 基本上 Mac 已經內建了 node
如果您已經在系統上安裝了Node，請確保它是版本6或更新的版本。

同學可以輸入:

node -v

來查看版本喔~

v6.11.4 --阿傑老師用的版本

2:Wahchman
Watchman是Facebook觀看文件系統變化的工具。 強烈建議您安裝它以獲得更好的性能。

brew install watchman

3:React Native CLI

npm install -g react-native-cli

4.Xcode 基本上 Xcode也是Mac內建 不需要特別再安裝..除非手x把它移除了~

Mac 開發環境其實很優化了
以上步驟真的是非常容易操作~

接下來 我們來創建專案

react-native init yourProjectName (駐1)

駐1: 此部分是您的專案名稱 請輸入自己的專案名稱, 不要使用中文喔

創建中會把相關依賴給安裝進去 大概起來扭一扭腰就完成了~

再來執行專案

cd yourProjectName

react-native run-ios (駐2)

駐2: 使用指令來執行專案類別 要啟動Android 專案時(需安裝Android相關依賴)
請輸入 react-native run-android

等待一下 執行專案

若沒出現錯誤
可以看到以下畫面喔~

以上畫面 在執行 react-native run-ios 後
會開啟模擬器 來模擬應用的實際運作情形

是不是很簡單呢?


我們來看一下資料結構

主要結構大概說明一下

1:android - 這邊是android專案相關的結構資料 以後會深入探討
2:ios - 這邊是專案相關的結構資料 以後會深入探討.
3:node_modules - 安裝的模組都會儲存到這邊
4:package.json - 這邊記錄了所有安裝依賴的資訊
5:index.js - 宣告app註冊元件, 基本上可以保留現有設定 不需要去做更動

// index.js
import { AppRegistry } from 'react-native'; //從 react-native 輸入 AppRegistry 元件
import App from './App'; // 輸入 App 元件
AppRegistry.registerComponent('AJHello', () => App); 駐3

駐3:

AppRegistry是JS運行所有React Native應用的入口
應用的根組件通過 AppRegsitry.registerComponent 方法註冊自己
然後原生系統才可以加載應用的代碼包
並且在啟動完成後
順利調用AppRegistry.runApplication來運行程序

6.App.js - 這邊包含 react native 範例 方便開發者快速理解基礎呈現

// App.js 官方範例
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
  'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },

});

老師由上而下 大概說明一下:

1. import React, { Component } from 'react';
這邊是在輸入 react 組件的 React 與 Component 元件
直接影響是下面的宣告

import React, { Component } from 'react';
export default class App extends Component {}

也可使用以下方式:

import React from 'react';
export default class App extends React.Component {}

2. 輸入 react-native 內的元件

import {
  Platform, // 可用來判斷ios / android 平台並執行操作
  StyleSheet, // 依據CSS樣式來美化 APP
  Text, // 所有輸入文字的組件 通用Text 類似html的 <p /> 標籤
  View // 類似html的<div />, <span />, <Section />, <Article /> 通用View實現
} from 'react-native';

3.宣告一個常量 const

const instructions = Platform.select ({
  ios: 'Press Cmd+R to reload,\n' +
  'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
  'Shake or press menu button for dev menu',
}); 駐4

這邊其實也可以使用 var 來宣告
但 var 有可能會有些bug
以下為bug 發生範例:

for(var i=0;i<10;i++){
          var a = 'a';
    }

console.log(a);

如果使用 var 宣告
上面例子可能會發生以下情形,
當你跳出 for 迴圈外了
但還是有可能會訪問到~ i 以及 a (發生機率不一定)

為了減少此發生機率 可以改用 const 來宣告常量

駐4:
這邊的語法很直覺
是在宣告一個常量 instructions 透過 Platform 元件來做裝置判斷

當裝置是 IOS 時 instructions = 字串內的文字
當裝置是 Android 時 instructions = 字串內的文字

4.輸出基礎元件

export default class App extends Component { } // 當引用App.js時 輸出名稱為App的基礎元件

5.在結構內做樣式宣告

React Native 在定義樣式 很簡單
概念和 html / css 很接近
可以直接把樣式寫在原件上 或者 制定一個樣式名稱
透過樣式名稱來定義

// 直接定義樣式在原件上
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
   <Text style={{ fontSize: 20, textAlign: 'center', margin: 10 }}>
      Welcome to React Native!
   </Text>
</View>

// 制定樣式名稱 在styles 撰寫樣式規則
<View style={styles.container}>
  <Text style={styles.welcome}>
     Welcome to React Native!
  </Text>
  <Text style={styles.instructions}>
     To get started, edit App.js
  </Text>
  <Text style={styles.instructions}>
     {instructions} // 判斷裝置後 把對應的字串輸入進來這裡
  </Text>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

大致上說明到這邊

下課瞜~