還記得 React Native 可以同時完成 iOS / Android 裝置吧？
跨平台裝置如果不同 style 要如何設定？
跨平台裝置如果整個頁面都不一樣怎麼辦？

淺談裝置設計

相信大家都了解 iOS 跟 android 有不同的 UI 設計吧？

• iOS 是 human-interface-guidelines
• android 是 material

在介紹 React Native 的時候有提到，使用 RN 開發提高了效率，一次可以開發雙平台，但雙平台卻有可能有著不同的樣式。
在臉書 F8 中有提到跨平台有提到跨平台設計過程，大家可以看看。

不同平台樣式之解決辦法

跨平台裝置如果不同 style 要如何設定？
跨平台裝置如果整個頁面都不一樣怎麼辦？
不同 version 要有不同的樣式

來來～ 引入非常好用的 Platform

import { Platform } from 'react-native';

1. 使用 Platform.OS 來判斷裝置

'ios' | 'android'
如下，當寫的是 ios 則 200 會是 iOS 高度的呈現；反之，100是 android 的高度呈現

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100
});

2. 於 StyleSheet.create 運用 ...Platform.select

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red'
      },
      android: {
        backgroundColor: 'green'
      },
      default: {
        backgroundColor: 'blue'
      }
    })
  }
});

'ios' | 'android' | 'native' | 'default'

以上面的程式碼解釋
全部裝置會讀取到 flex: 1
背景部分
iOS 紅色
android 綠色
其他裝置 藍色

以下為原始碼：

export function create(styles: Object): {[name: string]: number} {
  const platformStyles = {};
  Object.keys(styles).forEach((name) => {
    let {ios, android, ...style} = {...styles[name]};
    if (ios && Platform.OS === 'ios') {
      style = {...style, ...ios};
    }
    if (android && Platform.OS === 'android') {
      style = {...style, ...android};
    }
    platformStyles[name] = style;
  });
  return StyleSheet.create(platformStyles);
}

看起來相當好理解，以 Platform.OS 來判斷裝置，再加以複寫 StyleSheet

3. 使用副檔名來判斷(Platform-specific extensions)

在檔案後面加上裝置的名字 ".ios" / ".android"

Panel.ios.js
Panel.android.js

接著於 components 引入元件

import Panel from './Panel';

React Native 將會自動依照裝置讀取檔案！

4. 不同 version 不同樣式

這似乎也可以使用在 A/B testing 的機制中 :P

android

import { Platform } from 'react-native';

if (Platform.Version === 1.0.0) {
  console.log('Running on Nougat!');
}

iOS

import { Platform } from 'react-native';

const majorVersionIOS = parseInt(Platform.Version, 10);
if (majorVersionIOS <= 9) {
  console.log('Work around a change in behavior');
}

結論

針對不同裝置給予不同的UI呈現，了解什麼才是使用者偏好及喜愛給予他們良好的使用者體驗是我們的目標與使命，所以希望這篇文章對大家有所幫助，更加的瞭解手機裝置的設計風格及如何使用裝置判斷。

詳細可以參考 官方文件唷！

Day 8 done 請多多指教 ~