还记得 React Native 可以同时完成 iOS / Android 装置吧?
跨平台装置如果不同 style 要如何设定?
跨平台装置如果整个页面都不一样怎麽办?
相信大家都了解 iOS 跟 android 有不同的 UI 设计吧?
在介绍 React Native 的时候有提到,使用 RN 开发提高了效率,一次可以开发双平台,但双平台却有可能有着不同的样式。
在脸书 F8 中有提到跨平台有提到跨平台设计过程,大家可以看看。
跨平台装置如果不同 style 要如何设定?
跨平台装置如果整个页面都不一样怎麽办?
不同 version 要有不同的样式
来来~ 引入非常好用的 Platform
import { Platform } from 'react-native';
'ios' | 'android'
如下,当写的是 ios 则 200 会是 iOS 高度的呈现;反之,100是 android 的高度呈现
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
height: Platform.OS === 'ios' ? 200 : 100
});
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
在档案後面加上装置的名字 ".ios" / ".android"
Panel.ios.js
Panel.android.js
接着於 components 引入元件
import Panel from './Panel';
React Native 将会自动依照装置读取档案!
这似乎也可以使用在 A/B testing 的机制中 :P
import { Platform } from 'react-native';
if (Platform.Version === 1.0.0) {
console.log('Running on Nougat!');
}
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()
要来介绍大家最爱用的 Flexbox 了,以往兼容性还不太好的时候,大多都是使用表格(table)...
网页的开始 於布局排版 现在的年代 也需要RWD适合部分版型 所以我们就由布局开始吧 常常会看到一种...
相信大家对Fibonacci这个名称应该都不陌生 就直接来看题目的定义吧! Given n, cal...
使用程序语言实作功能时,一百个人写就会有一百种不同的程序码,虽然都可以正常运作,但有些写法(例如全域...
let 用於宣告一个「只作用在当前区块的变数」,初始值可选择性的设定。 以 let 宣告的变数,其作...