大佬教程收集整理的这篇文章主要介绍了ReactNative中iOS和Android的style分开设置教程，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
reactnative可以编辑iOS程序也可以编辑Android程序,而且80%的代码都可以重用. 及有些文件是两个系统通用的,相信大家也都清楚了.
但是也许大家会遇到一些屏幕布局的问题,最常遇到的就是Android的状态栏我们是无法涉及的而iOS的就可以. 所以当一个component设置了marginTop时,两个系统需要设置的数值是不一样的.
我们没必要为了一个style而创建两个文件(***.ios.js和***.android.js)当然这肯定能解决问题,但是每次都这样做的花,会很浪费,而且代码冗余,也导致重用代码率也低了.
在此跟大家介绍一个很好的解决办法,只需要建一个style文件即可解决.
‘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分开设置教程所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。