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中的常量失效，需要在使用時按上面的方法重新定義