[ 卡卡 DAY 8 ] - React Native 跨平台装置判断

还记得 React Native 可以同时完成 iOS / Android 装置吧?
跨平台装置如果不同 style 要如何设定?
跨平台装置如果整个页面都不一样怎麽办?

浅谈装置设计

相信大家都了解 iOS 跟 android 有不同的 UI 设计吧?

在介绍 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 请多多指教 ~


<<:  [Day15] swift & kotlin 实作篇!(6) Layout排版

>>:  JavaScript Day 14. 灵活运用 reduce()

Day.7 「CSS 网页切版必学,用过都说赞!」 —— CSS 弹性盒模型 Flexbox

要来介绍大家最爱用的 Flexbox 了,以往兼容性还不太好的时候,大多都是使用表格(table)...

从 React 开始,让你的网页material-ui起来 [Day 3] 排版布局Container

网页的开始 於布局排版 现在的年代 也需要RWD适合部分版型 所以我们就由布局开始吧 常常会看到一种...

Day 02 : Fibonacci 斐波那契

相信大家对Fibonacci这个名称应该都不陌生 就直接来看题目的定义吧! Given n, cal...

24 - ESLint - Lint JavaScript 程序码

使用程序语言实作功能时,一百个人写就会有一百种不同的程序码,虽然都可以正常运作,但有些写法(例如全域...

JS let var const的不同

let 用於宣告一个「只作用在当前区块的变数」,初始值可选择性的设定。 以 let 宣告的变数,其作...