React Native - arthur791004/notes GitHub Wiki

Component

Basic

  • View: 相當於 div
  • Text: 相當於 p
  • Image
  • Touchables*
    • 可以結合各種的手勢，長按一個按鈕、滾動 List、放大縮小地圖、Swipe 等等
    • onPress、onPressIn、onPressOut、onLongPress 等等的 Event Handler
    • Components (被 Touch 之後會有不同的 Feedback)
      • TouchableHighlight: 被 Touch 之後會有一個 Highlight 的效果，可以透過 underlayColor 改變
      • TouchableOpacity
      • TouchableNativeFeedback (Only for Android, not recommend)
      • TouchableWithoutFeedback
  • Button
    • 只保留了 onPress，沒有 onPressIn、onLongPress 等等的其他 Handler
    • 只保留了 color (在 iOS 是文字顏色、在 Android 是背景顏色) 的客製化，無法設定其他 style
  • ScrollView
    • 內容超出一個畫面所能顯示的量時，我們通常需要使用 ScrollView，讓它能藉由往下滑來瀏覽
  • ListView
    • 用在呈現大量陣列資料時使用，不會一次 Render 所有的 Item，只會 Render 呈現在畫面上的 Item
    • 需要傳遞一個 Function 給 renderRow，讓 ListView 知道怎麼去 Render 每一列
    • dataSource Prop 接一個 ListView.DataSource，而產生它的時候要給一個回傳 Boolean 值的 rowHasChanged Function，讓它可以判斷兩個 Row 是不是一樣的
    • Example 
      const ds = new ListView.DataSource({
  rowHasChanged: (r1, r2) => r1 !== r2,
});
const dataSource = ds.cloneWithRows([
  '1',
  '2',
]);
const renderRow = text => <Text>{text}</Text>

// usage
<ListView
  dataSource={dataSource}
  renderRow={renderRow}
/>

Navigation

  • Navigator、NavigatorIOS、NavigationExperimental 的差別？
    • Navigator 是用 JavaScript 實作的 Navigation 方案，因此能輕鬆的跨平台也能簡單的客製化樣式。也是這其中最老牌而且簡單易用的一個。
    • NavigatorIOS 是利用 iOS UIKit 的 UINavigationController 來實作的，所以有 Native 的感覺，不過因為只支援 iOS 所以價值不高。值得一提的是，wix 開發的 react-native-navigation 實作了跨平台的 Native Navigation，或許也是個有趣的選擇。
    • Navigator 跟 NavigatorIOS 都是 Stateful 的，NavigationExperimental 則是一個有別於它們的方式，是用 Reducer 來處理 Navigation State。

Navigator

  • Props
    • initialRoute
    • initialrouteStack
    • renderScene
  • Scene 切換方式
    • Navigator.SceneConfigs

NavigationExperimental

  • 單向的資料流，其中用了 Redux 的概念 Reducer 來處理 Navigation State
  • Navigation 跟 View 的邏輯完全拆開
  • 可以使用 Animated 來操作動畫跟手勢
  • Usage
    1. 定義初始 State 以及頂層 Component
    2. 用 Reduce 處理 Navigation State
    3. 定義 Scene
    4. 建立 Navigation Stack
  • React Native Navigation Library

TextInput & Keyboard

  • KeyboardAvoidingView: 避免被鍵盤擋到

Network

  • fetch, axios, superagent, XMLHttpRequest
  • SSL: iOS 預設會擋掉沒有使用 SSL 加密的請求，可以在 Info.plist 加上例外的 Domain
  • WebSocket
    • 內建支援 WebSocket，也能無痛使用 socket.io 更是其一大優勢
    • Example
    // WebSocket
const ws = new WebSocket('ws://host.com/path');

// socketio
import socketio from 'socket.io-client';

const socket = socketio('http://localhost:3000');
  • WebRTC
    • MediaStream：影音的串流
    • RTCPeerConnection：點對點的連接
    • Peer-to-peer Data：點對點的資料傳輸
    • Library

Storage

  • AsyncStorage
    • 唯一官方支援的儲存方式
    • Key-Value 的存取方式
    • iOS 會把小的值儲存在 Dictionary、大的值儲存在分開的檔案中，在 Android 上則會看裝置的支援狀況選用 RocksDB 或 SQLite。
  • Realm
    • Data Model 跟 Schema
    • 自動更新結果物件
    • 高效能

Style

StyleSheet.create

Flexbox Layout

Grid Layout

Testing (Mocha, Jest, Ava)

  • Jest

Debug

  • console.error: RedBox
  • console.warn: YellowBox at bottom
  • Print console.log 
$ react-native log-ios
$ react-native log-android

Upgrade

  • react-native upgrade
  • 使用 git 來升級 
    $ yarn global add react-native-git-upgrade
$ react-native-git-upgrade

Cross Platform

UI

  • iOS 上 Title 通常置中，而 Android 上置左
  • iOS Tab 使用框線加圓角，Android 使用下底線
  • Android 有回上頁的實體按鈕，而 iOS 只有 Home 鍵，所以通常左上角會放回上一頁的按鈕。
  • iOS 上方只能左右各放一個按鈕，而 Android 可以放兩個以上的按鈕。
  • 確認、取消的按鈕位置的不同

File Extension

<filename>(.android|.ios)?.ext

Platform Module

import { Platform } from 'react-native';

console.log(Platform.OS)

Platform StyleSheet

const styles = F8StyleSheet.create({
  container: {
    ios: {
      paddingBottom: 6,
      justifyContent: 'center',
      alignItems: 'center',
    },
    android: {
      paddingLeft: 60,
    },
  },
  // ..
};

Native Modules

IDE

  • Nuclide
    • Based on Atom
    • Debug JS Remotely, Show Inspector
  • Deco
    • 可以直接在 Components 面板搜尋想要的 Component，也看得到簡單的介紹跟預覽圖
    • 可以類似 Xcode 那樣把 UI 元件直接拉近程式碼中
    • 在右邊的 Properties 區塊可以看到跟程式碼中對應的那些可以修改的屬性

TroubleShooting

Reference

⚠️ **GitHub.com Fallback** ⚠️