React

React Native

Fuyaode@逢甲大學

2017/09/05

About Me

 

  • 傅耀德 (FuD、FuYaoDe)
    • 創科資訊全端工程師
    • 專注於 Node 生態體系
  • ​教學 / 經歷
    • GitHub 1400 Star React Native UI 元件 react-native-app-intro
    • 經營 React Natvie Taiwan 社群
    • 2017 第 8 屆iT 邦鐵人賽 佳作
    • 2017 HelloJS 講師 - React Native
    • 2016 Trunk Studio - 前端開發 React / Redux 起手式
    • 2016 HelloJS 講師 - React Native

React 介紹

Virtual DOM

  • 複雜或頻繁的DOM操作通常是性能瓶頸產生的原因​

  • 定義 UI 要怎麼呈現，而負責 Render 和操作，由 React 負責

React Native 介紹

React Native 是什麼？

  • 2013 年夏天 Facebook 內部駭客松的 Project。
  • 2015 年 1 月 React.js Conf 發表， 2015 年 5 月正式發佈，當時只有 iOS 版本，2015 年 9 月 Android 才正式支援。
  • Learn once, write anywhere：Build mobile apps with React
    • iOS
    • Apple TV
    • Android
  • 用 JavaScript 撰寫真正的原生 App，不是所謂的 Mobile Web App、HTML5 App、 Hybrid App

其他類似的框架

特色

  • 使用同一套專案 Code Base 即可達成跨平台 App 開發建置與維護。
  • 效能與使用體驗接近原生開發。
  • 採用與 Web 前端相同的 REST API / JWT 存取後端資料服務。
  • 維護人員進入門檻低(熟悉 JavaScript 語言之開發人員)。
  • 可同步使用 iOS 與 Android 雙平台裝置進行測試與調校。
  • 開發時可以快速的更新 UI，不用重新編譯。
  • 免送審更新程式之機制，Microsoft CodePush。
  • 更新週期快速 v0.40 以前每兩週 release 一個版本，目前每個月 release 一個版本。
  • Product Pains - 讓社群投票表決 feature。

缺點

  • 開發環境對於電腦硬體需求較高。
  • 需熟悉了解 React。

showcase 官方頁面 ShowCase
中國 ShowCase

延伸閱讀

環境介紹、開發環境安裝

VM 連接教學

 

  • 開啟 Genymotion。
  • 開啟 Genymotion 當中的 Android 虛擬機 Custom Phone - 7.1.0 - API 25 - 768x1280，等待開機完成。
  • 命令提示字元 cd 到 HelloJS 資料夾底執行指令。 
$ adb devices
$ adb tcpip 5556
  • 開啟 VirtualBox 當中的 HelloJS-RNC9
  • HelloJS-RNC9 出現 login 字樣，開啟網頁 http://localhost:9083/ide.html
  • 到 C9 terminal 視窗輸入指令
$ adb connect $ip:5556
$ adb devices
/* 測試是否有連上 */
$ adb shell am start -a android.settings.SETTINGS

Android SDK

React Native 目前需要 Android Studio2.0 或更高版本。

開發環境

SDK Platforms 選擇 Google APIs 、 Android SDK Platform 23 

SDK Tools 選擇 Android SDK Build-Tools 23.0.1 

Android 環境變數

確保 ANDROID_HOME 環境變數跟 SDK 路徑一致。

 

Windows
控制台 > 系統及安全性 > 進階系統設定 > 進階 > 環境變數 > 新增

控制台 > 系統及安全性 > 進階系統設定 > 進階 > 環境變數 > 選擇 PATH > 編輯 在後方新增

;C:\Users\使用者名稱\AppData\Local\Android\sdk\platform-tools;C:\Users

\使用者名稱\AppData\Local\Android\sdk\tools

Mac 開起 ~/.bashrc 或 ~/.zshrc 或 ~/.profile 在最後加上 

export ANDROID_HOME=${HOME}/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

Android 虛擬機

常見問題

常見問題

延伸閱讀

React Natvie 初始專案

CLI

$ npm install -g react-native-cli

開新專案

$ react-native init HelloJs
$ cd HelloJs
$ npm start
$ react-native run-android

專案環境

專案結構

.
├── __tests__
├── android
├── index.android.js
├── index.ios.js
├── ios
├── node_modules
└── package.json

App 名稱位置 :

./android/app/src/main/res/values/strings.xml

 ./android/app/src/main/res/mipmap-*

App icon:

進入點

  • index
  • .ios、.android
  • AppRegistry

Debug 按鈕

  • Debug JS Remote
    • http://localhost:8081/debugger-ui
  • reload
  • touchable
  • Hot reload
  • Live Reload

FlexBox

Flex

Flexbox，就可以在不同屏幕尺寸上提供一致的佈局結構。 雖然跟網頁 CSS 的 flex 很像，但是還是有些為的差異 例如: flexDirection 在網頁中預設是 row，在 RN 裡面預設為 column。

Style

  • 遵循 Web 上的 CSS 命名
  • 小駝峰
  • 可以傳入 style object
  • 可以傳入 style array ，會根據 index 給予樣式的優先權
  • StyleSheet.create
    • 提高 style 的可讀性
    • 驗證 style
    • 提高性能
    • 把 style 變成一個 id 來引用，這樣不用每次都創一個 style object
<Text style=>A</Text>
<Text style={[{ color: 'red' }, { color: 'blue' }]}>A</Text>
<Text style={styles.red}>red</Text>

const styles = StyleSheet.create({
  red: {
    color: 'red',
  },
});

FLexBox

flexDirection 決定佈局的主軸，可設定子元素是水平排列還是垂直排列

  • column 垂直排列 (預設)
  • row 水平排列

justifyContent 可以決定其子元素，沿著主軸的排列方式

  • flex-start 主軸起始位置
  • center 主軸中心
  • flex-end 主軸末端
  • space-around 根據主軸均勻分布空白
  • space-between 根據主軸均勻分布物件

alignItems 可以決定其子元素，沿着次軸的排列方式

  • flex-start 次軸起始位置
  • center 次軸中心
  • flex-end 次軸末端
  • space-around 根據次軸均勻分布空白
  • space-between 根據次軸均勻分布物件

使用範例

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

export default class FlexSample extends Component {
  render() {
    return (
      <View style=>
        <View style=>
          <View style=>
            <Text style=>右上</Text>
          </View>
          <View style=>
            <Text style=>置中</Text>
          </View>
        </View>
        <View style=>
          <View style=>
            <Text style=>右上？</Text>
          </View>
          <View style=>
            <Text>1</Text>
            <Text>2</Text>
            <Text>3</Text>
          </View>
        </View>
      </View>
    );
  }
}

Code 太長，無法一頁顯示

練習

flexboxfroggy - 用遊戲學習 CSS 的 flexbox 玩到第 12 關

yoga - Facebook 實作的跨平台 Flex library

View

View

建構 UI 的基礎元件，支持 Flexbox 佈局、Style、一些觸摸處理、和一些無障礙功能的容器，並且它可以放到其它的視圖裡，也可以有任意多個任意類型的子視圖。不論在什麼平台上，View 都會直接對應一個平台的原生視圖，無論它是 UIView、<div> 還是 android.view 等等

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

export default class ViewSample extends Component {
  render() {
    return (
      <View style=>
       <View style= />
       <View style= />
      </View>
    );
  }
}

文字 Text

Text

用於顯示文本的 React Component，並且它也支持嵌套、樣式，以及觸摸處理。

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

export default class TextSample extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text1}>HelloJS</Text>
        <Text style={styles.baseText}>
          <Text style={styles.title}>HelloJS</Text>
          <Text style={styles.desc}> Good</Text>
        </Text>
        <Text
          style=
          numberOfLines={1}
          onPress={() => {
            Alert.alert("阿!!", "你點到我了");
          }}
        >
          測試測試測試測試測試測試測試
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 30,
  },
  text1: {
    fontSize: 30,
  },
  baseText: {
    fontSize: 18,
    color: 'blue'
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  desc: {
    color: 'red',
  }
})

Code 太長，無法一頁顯示

圖片 Image

Image

用於顯示圖片的 React Component

  • 本地圖片
  • 專案圖片資源 例：
  • 網路圖片

/android/app/src/main/res

本地圖片

  • 圖片有 @2x、@3x 後輟，React Native 會根據螢幕解析度選擇最適合的大小
  • iOS、Android 可以使用相同的路徑
  • 只有有用到的圖片會被打包
  • 不需要額外設定圖片寬高
使用範例：
assets
├── man@2x.png
├── man@3x.png
└── man.png
<Image source={require('./assets/man.png')} />
  • Xcode 的 asset、Android 的 drawable
  • 需要手動設定圖片寬高
  • iOS、Android 用法不同
  • 注意此時只使用檔案名稱，不帶路徑、後輟
使用範例：
<Image source= style= />

Android:
<Image source= style= />

App 圖片資源

使用範例：
  • 需要手動設定圖片寬高
<Image
  style=
  source=
/>

網路圖片

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

export default class ImageSample extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          style=
          source=
        />
        <Image
          style=
          source={require('./assets/man.png')}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 30,
  },
})
Images Guide

延伸閱讀

按鈕 Touchableopacity、Button

Button、Touchable

React Natvie 當中拿來當作按鈕的元件

Button

  • 0.38 版才開始支援
  • 只支援最低限度的客製化
    • title
    • color
  • iOS、Android 樣式不一樣
使用範例：
<Button
  onPress={() => {}}
  title="HelloJS"
  color="#841584"
/>

Touchable

  • TouchableHighlight
    • 點擊後反黑
  • TouchableNativeFeedback
    • Android 會有 Material 效果
  • TouchableOpacity
    • 點擊後變透明
  • TouchableWithoutFeedback
    • 點擊後沒有反饋， UX 因素不推薦使用
Images Guide

延伸閱讀

View、Text、FlexBox 練習

練習ㄧ

使用 ./ListItem.js 做出的樣式

Made with Slides.com