[轉] react-native 之布局篇

標籤：

PS: 蘋果使用的寬度單位是為了設計開發人員在應用上使用接近的數值。比如寬度範圍都在320-414之間。但是寬度對應到像素是有一個轉換比例的，對於背景圖尤其要準備足夠像素的圖片。這個足夠像素可以通過公式PixelRatio計算得到，iphone6P最大是1080*1920

寬度單位和像素密度

react的寬度不支持度百分比，設定寬度時不需要帶單位 {width: 10}， 那麼10代表的具體寬度是多少呢？

不知道是官網文檔不全還是我眼瞎，反正是沒找到，那做一個實驗自己找吧：

    var Dimensions = require(‘Dimensions‘);    <Text style={styles.welcome}>          window.width={Dimensions.get(‘window‘).width + ‘\n‘}           window.height={Dimensions.get(‘window‘).height + ‘\n‘}           pxielRatio={PixelRatio.get()}    </Text> 

預設用的是ihone6的模擬器結果是：

    window.width=375    window.height=667

我們知道iphone系列的尺寸如：

可以看到iphone 6的寬度為 375pt，對應了上邊的375，實際上官文指出的單位為 dp 。 那如何擷取實際的像素尺寸呢？ 這對圖片的高清化很重要，如果我的圖片大小為100100 px. 設定寬度為100 100. 那在iphone上的尺寸就是模糊的。 這個時候需要的映像大小應該是 100 * pixelRatio的大小 。

react 提供了PixelRatio 的擷取方式https://facebook.github.io/react-native/docs/pixelratio.html

 var image = getImage({   width: 200 * PixelRatio.get(),   height: 100 * PixelRatio.get() }); <Image source={image} style={{width: 200, height: 100}} />

[轉] react-native 之布局篇