iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Modern Web

React Native & Redux 初步探討系列 第 15

Day 15 Platform module

  • 分享至 

  • xImage
  •  

15 天了,沒想到過半了,再接再厲~~

講了幾天的 React , 現在讓我們把焦點拉回 React Native

React Native 是跨平台的,

雖然 React Native 對雙平台的一些開發規格化了,

但還是會有碰到某些部分需要針對某平台做單一調整,

React Native 提供一個 Platform module

專門來處理,兩邊平台需要客製化的時候

Platform module 的結構大概是這樣:

https://ithelp.ithome.com.tw/upload/images/20210930/20112878Bo298Mh7bC.png

OS

提供目前使用的平台是哪個 ,
iosandroidmacOSwindowsweb

後面三個就比較少見了,不過 React Native 也確實有提供他們的介面出來就是

Version

針對使用的平台當前版本

constants

這個就是提供了,針對每個平台的會使用到的常數,目前只有 ios & android

公用參數:

  • reactNativeVersion: React Native 版本
  • isTesting: 是否在跑測試

Android:

  • Version: 當前 Android SDK 版本
  • Release: 當前 Android 版本
  • Serial: Android Serial 碼
  • Fingerprint: 指紋鎖ID
  • Model: 手機型號
  • Brand: 品牌商
  • Manufacturer: 製造商
  • uiMode: UI 介面類型

IOS:

  • forceTouchAvailable: 是否可用 3D touch
  • interfaceIdiom: UI 介面類型
  • osVersion: 作業系統版本
  • systemName: 作業系統名稱

想確認的話可以參考官網

isPad

判斷是否是平板電腦

isTV

判斷是否是電視盒

isTesting

判斷是否是在跑測試

select

這是一個 function , 是一個選擇器,可設定在不同平台輸出指定結果

輸入物件, 內部的 key 值有 ,

  • ios : 針對 ios 的動作
  • android : 針對 android 的動作
  • native : 針對雙平台的動作
  • default : 上述都沒有選擇到時
const selected = Platform.select({
  ios: 'ios select!',
  android: 'android select!',
  native: 'native select!',
  default: 'default select!',
});

上一篇
Day 14 event
下一篇
Day 16 To Do List - 切版 1
系列文
React Native & Redux 初步探討33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言