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文件，输入以下代码 

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);
}

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

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


/*引入自定义的StyleSheet文件,假设上面定义的文件与当前文件在同一目录下*/
const StyleSheet = require('./StyleSheet');

const styles = StyleSheet.create({
    container:{
        flex:1,
        alignItems:'center',
        justifyContent:'center',
        ios:{
            marginTop:20,
            backgroundColor:'red',
        }
        android:{
            backgroundColor:'blue',
        }
    }
});

export default class HomeView extends Component<Props> {
    render(
        return (
            <View style={styles.container}>
            <Text>请自行查看效果</Text>
            </View>
        )
    )
}

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

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