React Native 中为IOS和Android设置不同的Style样式,一套代码解决双端显示

React Native 开发中,大多数的组件都是IOS和Android通用的,包括大量的功能性代码,至少有80%以上的代码可以复用,而剩下的一些组件样式/少量的代码会需要区分双端,但是为了这少量的代码把IOS和Android完全区分这明显不合适,代码复用性下降,代码维护量上升,明显是不合理的。

本文借鉴网上的教程,为大家介绍如何为IOS端和Android端设置不同的style样式,让一套代码双端适用。本文仅解决部分组件的style样式,后期如果遇到其它的代码类型也会为大家提供教程。

React Native 版本:`0.55.4`,因为0.56版RN在Window端报错,所以Mac也习惯使用0.55.4

由于IOS的屏幕设定,IOS端一般需要设置一个marginTop:20的属性,而android是不需要的,这里以此为例

实现原理:重定义RN自带的StyleSheet组件中的create方法,添加IOS和android判断。

步骤一、新建一个StyleSheet.js文件,输入以下代码 

 
  1. import {StyleSheet, Platform} from 'react-native';

  2.  
  3. export function create(styles: Object): {[name: string]: number} {

  4. const platformStyles = {};

  5. Object.keys(styles).forEach((name) => {

  6. let {ios, android, ...style} = {...styles[name]};

  7. if (ios && Platform.OS === 'ios') {

  8. style = {...style, ...ios};

  9. }

  10. if (android && Platform.OS === 'android') {

  11. style = {...style, ...android};

  12. }

  13. platformStyles[name] = style;

  14. });

  15. return StyleSheet.create(platformStyles);

  16. }

步骤二,视图页面取消RN中StyleSheet的调用,添加自定义的StyleSheet

 
  1. import React, { Component } from 'react';

  2. import { Text, View} from 'react-native';/*/这里不再引入StyleSheet*/

  3.  
  4.  
  5. /*引入自定义的StyleSheet文件,假设上面定义的文件与当前文件在同一目录下*/

  6. const StyleSheet = require('./StyleSheet');

  7.  
  8. const styles = StyleSheet.create({

  9. container:{

  10. flex:1,

  11. alignItems:'center',

  12. justifyContent:'center',

  13. ios:{

  14. marginTop:20,

  15. backgroundColor:'red',

  16. }

  17. android:{

  18. backgroundColor:'blue',

  19. }

  20. }

  21. });

  22.  
  23. export default class HomeView extends Component<Props> {

  24. render(

  25. return (

  26. <View style={styles.container}>

  27. <Text>请自行查看效果</Text>

  28. </View>

  29. )

  30. )

  31. }

图片就不放了,请自行测试效果

注:本文方法会导致StyleSheet中的常量失效,需要在使用时按上面的方法重新定义

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值