效果圖

timer.gif

做類似于微信聊天輸入框，可能會遇到下面三個小困擾，記錄一下。

目錄

# 1、React Native固定底部TextInput

# 2、鍵盤遮擋問題

# 3、列表滾動問題

困擾 1、React Native固定底部TextInput

react-native 沒有fixed

核心方案:

- 最外部的包裹, flexDriction 默認的豎直

- 中間是滾動層 flex: 1,(ScrollView可以不加flex: 1, 其他組價沒測試,)

- 最下面的組件 固定高度

這是中間的滾動頁面 (flex: 1)

頁面展示在這個組件中

style={styles.inputView}

returnKeyType="send"

placeholder="請輸入消息"

/>

困擾2、鍵盤遮擋問題

有多種方案：

KeyboardAvoidingView

最簡單、最容易安裝使用的方法是 KeyboardAvoidingView。這是一個核心組件，同時也非常簡單。

你要做的第一件事是用 KeyboardAvoidView 替換 View，然后給它加一個 behavior 的 prop。查看文檔的話你會發現，他可以接收三個不同的值作為參數 ——?height， padding， position。我發現 padding 的表現是最在我意料之內的，所以我將使用它

render () {

return (

style={styles.container}

behavior="padding"

>

ref={'flatList'}

data={dataSources}

renderItem={this._renderItem}

// ItemSeparatorComponent={ItemDivideComponent}

/>

style={styles.inputView}

returnKeyType="search"

placeholder="請輸入消息"

/>

)

}

下一種解決辦法是使用 react-native-keyboard-aware-scroll-view，他會給你很大的沖擊。實際上它使用了 ScrollView 和 ListView 處理所有的事情(取決于你選擇的組件)，讓滑動交互變得更加自然。它另外一個優點是它會自動將屏幕滾動到獲得焦點的輸入框處，這會帶來非常流暢的用戶體驗。

它的使用方法同樣非常簡單 —— 只需要替換 基礎代碼 的 View。

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

Keyboard Module

這是迄今為止最為手動的方式，但也同時給開發者最大的控制權。你可以使用一些動畫庫來幫助實現之前看到的那種平滑滾動。

主要是監聽鍵盤活動，主動做一些操作，

詳見列表滾動問題處理

Combining Options

如果想提煉一些代碼，我傾向于結合幾種情況在一起。例如： 通選方案 1 和方案 3

困擾3、列表滾動問題

滾動必須調用到 flatlist 的scrollToIndex的方法,

this.refs.flatList.scrollToIndex({animated: true, index: this.generateBig().length-1, viewPosition: 0.5});

鍵盤彈出時，使列表最底端滾到輸入框頂部。

viewPosition 為0表示讓他的上部與頂部持平。

輸入結束后

this.refs.flatList.scrollToIndex({animated: true, index: this.generateBig().length-1, viewPosition: 1.9})

我的代碼：

componentWillMount () {

this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);

this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);

}

componentWillUnmount() {

this.keyboardWillShowSub.remove();

this.keyboardWillHideSub.remove();

}

keyboardWillShow = (event) => {

this.refs.flatList.scrollToIndex({animated: true, index: this.generateBig().length-1, viewPosition: 0.5});

};

keyboardWillHide = (event) => {

this.refs.flatList.scrollToIndex({animated: true, index: this.generateBig().length-1, viewPosition: 1.9})

}

傳送門

參考：

總結

以上是生活随笔為你收集整理的native固定吸顶 react_React Native固定底部TextInput，解决键盘遮挡、列表滚动问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。