react native進階_ZenDei技術網路在線

一、前沿||潛心修心，學無止盡。生活如此，coding亦然。本人鳥窩，一隻正在求職的鳥。聯繫我可以直接微信：jkxx123321 二、項目總結 **||**文章參考資料：1. http://blog.csdn.net/u011272795/article/details/73824558 2.htt ...

一、前沿||潛心修心，學無止盡。生活如此，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

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

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

持續跟新
今天介紹一下一個常用的地址選取組件，用sectionList做的連接地址:http://www.jianshu.com/p/09dd60d7b34f

效果圖：

另外，如果想跟多瞭解flatlist和sectionlist，請去下麵兩位個人的博客去看：

ReactNative分組列表SectionList使用詳情及示例詳解:

http://www.cnblogs.com/vipstone/p/7250625.html

對flat list中幾個常用的屬性翻譯一下：
ItemSeparatorComponent：分割線組件，
ListFooterComponent：結尾組件
ListHeaderComponent：頭組件
data：列表數據
horizontal：設置為true則變為水平列表。
numColumns：列數 組件內元素必須是等高的,無法支持瀑布流佈局
columnWrapperStyle：numColumns大於1時，設置每行的樣式
getItemLayout：如果我們知道行高可以用此方法節省動態計算行高的開銷。
refreshing：是否正在載入數據
onRefresh：設置此屬性需要一個標準的 RefreshControl 控制項，刷新數據
renderItem：渲染每個組件
onViewableItemsChanged：當一個新的Item渲染或者隱藏 的時候調用此方法。參數：info: {viewableItems: Array, changed: Array} viewableItems：當前可見的Item，changed：渲染或者隱藏的Item。
scrollToEnd({params?: ?{animated?: ?boolean}})：滾動到末尾，如果不設置getItemLayout屬性的話，可能會比較卡。
scrollToIndexparams: {animated?: ?boolean, index: number, viewPosition?: number}：滾動到制定的位置
scrollToOffset(params: {animated?: ?boolean, offset: number})：滾動到指定的偏移的位置
再介紹一個IM

資料：https://github.com/reactnativecomponent/react-native-netease-im

持續跟新

React Native中點擊輸入文本框時，彈出來的鍵盤遮擋文本框的解決方案！

效果圖：

參考資料代碼：

問題

iOS：輸入框獲取焦點時，彈出的鍵盤會遮擋視圖區域。

疑問：是在上層遮擋，還是同層壓縮了視圖容器的高度導致的？

Android：輸入框獲取焦點時，鍵盤區域會壓縮視圖高度（屏幕高度 - 鍵盤高度），不同的視圖容器內處理情況不一樣。

在 ScrollVIew 上打開鍵盤時，會自動根據當前輸入框是否被鍵盤擋住來滾動視圖；

在 View 上打開鍵盤時，視圖內容略微上移，由於視圖高度被壓縮，超出視圖的內容顯示不出來；

解決方案

解決 View 組件的鍵盤遮擋問題

使用場景

類似雪球的登錄界面（View），上半部分是圖片，下半部分是登錄表單。在表單輸入框獲取焦點時，鍵盤占據屏幕下半部分，並壓縮上方的圖片高度，以解決鍵盤遮擋輸入框問題。

實現方式

react-native-keyboard-spacer

...

解決 ScrollView 組件的鍵盤遮擋問題

使用場景

在 ScrollView / ListView 組件內部存在 TextInput 組件，要求輸入框獲取焦點時，視圖容器自動調整滾動高度，確保輸入框出現在鍵盤上方。

實現方式：
KeyboardAvoidingView

React Native 提供的組件，但要求 react-native 版本大於等於 0.29
使用 scrollView 組件實例的 API 實現
// Scroll a component into view. Just pass the component ref string.inputFocused (refName) 
{    setTimeout(() => {    let scrollResponder = this.refs.scrollView.getScrollResponder();    
scrollResponder.scrollResponderScrollNativeHandleToKeyboard(        
React.findNodeHandle(this.refs[refName]),        110, //additionalOffset
        true
    );
    }, 50);
}render () {    return (    <ScrollView ref='scrollView'>
        <TextInput ref='username' 
                    onFocus={this.inputFocused.bind(this, 'username')}    </ScrollView>
    )
}
備註：在 KeyboardAvoidingView 出現前的早起解決方案（不存在版本限制？）。
跟新時間：2017年8月29日22:24:00

補充一種用<ScrollView>完成此功能demo：http://www.jianshu.com/p/fb7c718a8d9a

效果圖:

今天跟新的是日曆，日期選擇組件

看圖：

參考資料：https://github.com/mmazzarolo/react-native-modal-datetime-picker

請隨意打賞

(微信掃碼)