嘔血總結React Native 這裡有你最想要的（react native進階）

---

---

一、前沿||潛心修心，學無止盡。生活如此，coding亦然。本人鳥窩，一隻正在求職的鳥。聯繫我可以直接微信：jkxx123321

二、項目總結

　　**||**文章參考資料：1.  http://blog.csdn.net/u011272795/article/details/73824558   

　　　　　　　　　　　2.http://blog.csdn.net/qq_25280063/article/details/52294221

 1）px2dp詳細總結

現在的手機品牌和型號越來越多，導致我們平時寫佈局的時候會在個不同的移動設備上顯示的效果不同，

比如我們的設計稿一個View的大小是300px，如果直接寫300px，可能在當前設備顯示正常，但到了其他設備可能就會偏小或者偏大，這就需要我們對屏幕進行適配。Android原生的話有自己的適配規則，可以根據不同的尺寸建立不同的文件夾，系統會根據當前的設備尺寸取對應的大小的佈局。而RN本身並沒有適配規則，而原生的又比較反鎖，這就需要我們自己去對屏幕進行適配。

先看一下剛出爐的屏幕適配工具類：

 

/**
 * Created by zhuoy on 2017/6/27.
 * 屏幕工具類
 * ui設計基準,iphone 6
 * width:750
 * height:1334
 */

/*
 設備的像素密度，例如：
 PixelRatio.get() === 1          mdpi Android 設備 (160 dpi)
 PixelRatio.get() === 1.5        hdpi Android 設備 (240 dpi)
 PixelRatio.get() === 2          iPhone 4, 4S,iPhone 5, 5c, 5s,iPhone 6,xhdpi Android 設備 (320 dpi)
 PixelRatio.get() === 3          iPhone 6 plus , xxhdpi Android 設備 (480 dpi)
 PixelRatio.get() === 3.5        Nexus 6       */

import {
    Dimensions,
    PixelRatio,
} from 'react-native';


export const deviceWidth = Dimensions.get('window').width;      //設備的寬度
export const deviceHeight = Dimensions.get('window').height;    //設備的高度
let fontScale = PixelRatio.getFontScale();                      //返回字體大小縮放比例

let pixelRatio = PixelRatio.get();      //當前設備的像素密度
const defaultPixel = 2;                           //iphone6的像素密度
//px轉換成dp
const w2 = 750 / defaultPixel;
const h2 = 1334 / defaultPixel;
const scale = Math.min(deviceHeight / h2, deviceWidth / w2);   //獲取縮放比例
/**
 * 設置text為sp
 * @param size sp
 * return number dp
 */
export function setSpText(size: number) {
    size = Math.round((size * scale + 0.5) * pixelRatio / fontScale);
    return size / defaultPixel;
}

export function scaleSize(size: number) {

    size = Math.round(size * scale + 0.5);
    return size / defaultPixel;
}

 

因為一般的設計稿都是以iphone6為基礎來設計的，所以這裡以iPhone6為基礎寫這個工具類，

當然如果你的不是，可以在上面更改，defaultPixelRatio改成你用的設備像素就好了。

我們這裡對文字和尺寸進行了適配。

看一下同樣的代碼在不同手機的顯示效果：

代碼：

 

export default class Home extends React.Component {

    render() {

        return (
            <View>
                <Text style={{fontSize: 30}}>沒適配,本機像素：{PixelRatio.get()}</Text>
                <Text style={{fontSize: ScreenUtil.setSpText(30)}}>已適配</Text>
                <View style={{
                    height: 50, width: 240, backgroundColor: 'green'
                }}></View>
                <View style={{
                    height: ScreenUtil.scaleSize(50),
                    width: ScreenUtil.scaleSize(240),
                    backgroundColor: 'red'
                }}></View>

            </View>
        )
    }

}

 

這裡，我用了像素為1.5和2.65的2個安卓設備來進行展示：

如圖：左側是大屏，右側是小屏手機。

第一行都是大小為30px的文字，因為屏幕本身的原因，導致看起來可能大小不同，但其實這是相同的大小文字。

而第二行我們適配過的看以看到，在大屏上(相對於iPhone6)，30px進行了放大，而小屏上則進行了縮小的操作。

這樣，在不同設備上，就會顯示合適的字體大小。

 

下麵的View也是一樣的道理，都進行了不同程度的縮小。

該文章持續跟新...喜歡的請關註...

 

---

 

---

 

持續更新

今天向大家介紹一個組件（我覺得還不錯的組件，感謝情書哥為我找到）

參考資料：https://github.com/nicinabox/react-native-line-gauge

 

對這個第三方如果有需求的，請於我溝通，聯繫方式文章首頁給出。

該文章持續跟新...喜歡的請關註...

---