ReactNative中iOS和Android的style分开设置教程

reactnative可以编辑iOS程序也可以编辑Android程序, 而且80%的代码都可以重用. 及有些文件是两个系统通用的, 相信大家也都清楚了.

但是也许大家会遇到一些屏幕布局的问题, 最常遇到的就是Android的状态栏我们是无法涉及的而iOS的就可以. 所以当一个component设置了marginTop时, 两个系统需要设置的数值是不一样的.

我们没必要为了一个style而创建两个文件(***.ios.js和***.android.js)当然这肯定能解决问题, 但是每次都这样做的花, 会很浪费, 而且代码冗余, 也导致重用代码率也低了.

在此跟大家介绍一个很好的解决办法, 只需要建一个style文件即可解决.

1.新建一个js文件(StyleSheet.js)

'use strict';import {StyleSheet, Platform} from 'react-native';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);
}

2. 然后在需要分别设置两个系统样式的地方导入该类, 而不需要再从'react-native'里导入了

const StyleSheet = require('./StyleSheet'); //假设在同一文件夹下

然后style就可以这样设置了:

const styles = StyleSheet.create({container:{flex:1,ios: {marginTop:64,},android: {marginTop:44,},}
})

然后程序就会根据系统分别设置两个不同的marginTop了.

转载于:https://www.cnblogs.com/itgezhu/p/11037678.html

ReactNative中iOS和Android的style分开设置教程相关推荐

App测试中ios和Android的区别1
App测试中ios和Android的区别: 一.多分辨率测试 1.手机常见分辨率: 4:3 VGA 640*480 (Video Graphics Array) QVGA 320*240 ( ...
app测试中ios和Android的区别：
app测试中ios和Android的区别: 1.Android长按home键呼出应用列表和切换应用,然后右滑则终止应用: 2.多分辨率测试,Android端20多种,ios较少: 3.机操作系统,An ...
手机APP测试中iOS和Android有何区别？
目录前言一.常识性区别二.导航方式三.单条item的操作四.关于排版五.实体键六.动效前言今天给大家浅浅的分享一下手机APP测试中iOS和Android有何区别? 一.常识性区别二 ...
ios和android区别是什么,app测试中ios和Android的区别：
今天偶然看到一个面试题,安卓和ios的测试区别,一下子只能想到几个基础的点,后面百度了一下,答案简单记录一下. app测试中ios和Android的区别: 1.安卓手机针对每一款手机有不一样的操作:苹 ...
为什么CAD软件中图块插入时无法分开设置XYZ轴比例？
在使用浩辰CAD软件绘制图纸的过程中,插入图块时可以设置XYZ轴统一比例,也可以取消勾选"统一比例"分别设置XY轴的比例,但有时候插入图块时 "统一比例"选项是 ...
app测试中ios和Android的区别
1.Android长按home键呼出应用列表和切换应用,然后右滑则终止应用: 2.多分辨率测试,Android端20多种,ios较少: 3.机操作系统,Android较多,ios较少且不能降级,只能单 ...
win10使计算机进入睡眠状态什么意思,技巧：如何在win10中进入睡眠模式计算机睡眠模式设置教程...
如何在Win10系统中快速进入睡眠模式?如何设置为自动进入睡眠模式?每个人都熟悉系统睡眠模式.如果计算机掉了东西,您可以将计算机设置为睡眠以节省电量.但是,如果您想进入休眠状态,则通常需要进行繁琐的设 ...
App 测试中 ios 和 Android 有哪些区别
1.Android长按home键呼出应用列表和切换应用,然后右滑则终止应用: 2.多分辨率测试,Android端20多种,ios较少: 3.手机操作系统,Android较多,ios较少且不能降级,只能 ...
App测试中ios和Android的区别2
四.push测试: 1.前台运行: 接送到推送后,点击推送消息,是否能跳转到链接 2.后台运行: Android:点击[home]或者返回键,使程序后台运行时,此时接收到push,点击后唤醒应用,此时 ...
win7计算机管理中没有本地用户,帮你win7系统计算机管理中没有本地用户和组的设置教程...
我们在使用电脑工作的时候,不可避免会遇到一些win7系统计算机管理中没有本地用户和组的状况,如今就有用户反映在使用电脑的时候遇到win7系统计算机管理中没有本地用户和组的情况不知怎么解决,针对这个问题 ...

ReactNative中iOS和Android的style分开设置教程

ReactNative中iOS和Android的style分开设置教程相关推荐

最新文章

热门文章