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

概述reactnative可以编辑iOS程序也可以编辑Android程序, 而且80%的代码都可以重用. 及有些文件是两个系统通用的, 相信大家也都清楚了. 但是也许大家会遇到一些屏幕布局的问题, 最常遇到的就是Android的状态栏我们是无法涉及的而iOS的就可以. 所以当一个component设置了marginTop时, 两个系统需要设置的数值是不一样的.  我们没必要为了一个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了.

总结

以上是内存溢出为你收集整理的ReactNative中iOS和Android的style分开设置教程全部内容，希望文章能够帮你解决ReactNative中iOS和Android的style分开设置教程所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。