React Native之圖片/寬高/字體平台適配

Platform.OS

為了提高代碼的兼容性，我們有時需要判斷當前系統的平台，然后做一些適配。比如，我們在使用 StatusBar 做導航欄的時候，在 iOS 平台下根視圖的位置默認情況下是占據狀態欄的位置的，我們通常希望狀態欄下面能顯示一個導航欄，所以我們需要為 StatusBar 的外部容器設置一個高度

<View style={{height: Platform.OS === 'ios' ? 20:0}}> <StatusBar {...this.props.statusBar} /> </View>;

 

留意api doc的android或ios標識

並不是所有 react Native 的一些 api 或組件的一些屬性和方法都兼容 Android 和 iOS ，在react Native 的 api doc 中通常會在一些屬性或方法的前面加上 android 或 ios 的字樣來標識該屬性或方法所支持的平台，如

android renderToHardwareTextureAndroid bool ios shouldRasterizeIOS bool 

在上述代碼中， renderToHardwareTextureAndroid bool 只支持 Android 平台， ios shouldRasterizeIOS bool 只支持 iOS 平台，所有我們在使用這些帶有標記的屬性或方法的時候就需要考慮對於它們不兼容的平台我們是否需要做相應的適配了

 

組件選擇

比如，我們要開發一款應用需要用到導航組件， 在React Native 組件中有 NavigatorIOS 與 Navigator 兩個導航組件來供我們選擇，從 api doc 中我們可以看出 NavigatorIOS 只支持 iOS平台， Navigator 則兩個平台都支持。

所以如果我們要開發的應用需要適配 Android 和 iOS ，那么 Navigator 才是最佳的選擇。

為了提高代碼的復用性與兼容性建議大家在選擇 React Native 組件的時候要多留意該組件是不是兼容 Android 和 iOS ，盡量選擇 Android 和 iOS 平台都兼容的組件。

 

圖片適配

開發一款應用少不了的需要用到圖標。無論是 Android 還是 iOS ，現在不同分辨率的設備越來越多，我們希望這些圖標能夠適配不同分辨率的設備。為此我們需要為每個圖標提供 1x 、 2x 、 3x 三種大小的尺寸 ，React Native 會根據屏幕的分辨率來動態的選擇顯示不同尺寸的圖片。比如：在 img 目錄下有如下三種尺寸的 check.png

└── img ├── check.png ├── [e-mail] └── [e-mail] 

那么我們就可以通過下面的方式來使用 check.png

<Image source={require('./img/check.png')} /> 

提示：我們在使用具有不同分辨率的圖標時，一定要引用標准分辨率的圖片如 require('./img/check.png') ，如果我們這樣寫 require('./img/[e-mail]') ，那么應用在不同分辨率的設備上都只會顯示`[e-mail] `圖片，也就無法達到圖片自適配的效果。

資源搜索網站大全 http://www.szhdn.com

字體/寬高適配

// utils/FontSize.js import { PixelRatio, Dimensions } from 'react-native'; let { width, height } = Dimensions.get('window'); export let FontSize = (size) => { if (PixelRatio === 2) { // iphone 5s and older Androids if (width < 360) { return size * 0.95; } // iphone 5 if (height < 667) { return size; // iphone 6-6s } else if (height >= 667 && height <= 735) { return size * 1.15; } // older phablets return size * 1.25; } if (PixelRatio === 3) { // catch Android font scaling on small machines // where pixel ratio / font scale ratio => 3:3 if (width <= 360) { return size; } // Catch other weird android width sizings if (height < 667) { return size * 1.15; // catch in-between size Androids and scale font up // a tad but not too much } if (height >= 667 && height <= 735) { return size * 1.2; } // catch larger devices // ie iphone 6s plus / 7 plus / mi note 等等 return size * 1.27; } if (PixelRatio === 3.5) { // catch Android font scaling on small machines // where pixel ratio / font scale ratio => 3:3 if (width <= 360) { return size; // Catch other smaller android height sizings } if (height < 667) { return size * 1.2; // catch in-between size Androids and scale font up // a tad but not too much } if (height >= 667 && height <= 735) { return size * 1.25; } // catch larger phablet devices return size * 1.4; } // if older device ie pixelRatio !== 2 || 3 || 3.5 return size; }; 

// 統一常用工具入口 utils/tool.js import { Dimensions, Platform, PixelRatio } from 'react-native'; import {FontSize} from './FontSize'; let { width, height } = Dimensions.get('window'); let pixelRatio = PixelRatio.get(); let screenPxW = PixelRatio.getPixelSizeForLayoutSize(width); let basePx = Platform.OS === 'ios' ? 750 : 720; // 像素轉dp let Px2Dp = function px2dp(px) { var scaleWidth = px * screenPxW*2 / basePx; size = Math.round((scaleWidth/pixelRatio + 0.5)); return size; }; export default { SCREEN_WIDTH: width, SCREEN_HEIGHT: height, iOS: Platform.OS === 'ios', Android: Platform.OS === 'android', Px2Dp, FontSize }; 

// 使用方式 import Tool from '../../utils/tool' const styles = StyleSheet.create({ header_info: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', height: Tool.Px2Dp(50), paddingTop: Tool.Px2Dp(25), paddingBottom: Tool.Px2Dp(10) }, text: { fontSize: Tool.FontSize(14), color: '#fff', paddingLeft: 5 }, })