React Native - FlatList無法到達底部

Question

我有一個面板，其中鍵盤始終處於啟動狀態，因為我不希望用戶將其解雇。 在該面板中，我有一個FlatList，如下所示：

<KeyboardAvoidingView style={{ flex: 1 }}>
      <FlatList
         // This keeps the keyboard up and disables the user's ability to hide it.
         keyboardShouldPersistTaps="handled"
         data={this.state.examples}
         keyExtractor={(item, index) => index.toString()}
         renderItem={this._renderItem}
         contentContainerStyle={{ flex: 1}}
      />
</KeyboardAvoidingView>

到目前為止，我已經實現了我想要的目標。 但是，當鍵盤啟動時 - 它會隱藏FlatList呈現的項目的底部。 並且用戶無法向上滾動並查看最后的項目，因為它們位於鍵盤后面。

如何在能夠查看和滾動FlatList的整個內容的同時保持鍵盤打開（並禁用被解散的功能）？

Answer 1

您可以添加鍵盤偵聽器事件以獲取鍵盤的高度。

this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', (e) => {
  this.setState({ keyboardHeight: e.endCoordinates.height, keyboardShow: true })
  Animated.timing(this.visibleHeight, {
    duration: e.duration,
    toValue: 1,
    easing: Easing.inOut(Easing.ease)
  }).start()
})

查看這樣的代碼

<Animated.View style={Platform.OS === 'android' ? { flex: 1 } : {
      height: this.visibleHeight.interpolate({
        inputRange: [0, 1],
        outputRange: [height - this.NavHeaderHeight, height - this.state.keyboardHeight - this.NavHeaderHeight]
      })
    }
    } >
     /*Your FlatList*/
</Animated.View>

我希望這個對你有用

Answer 2

我去過類似的情況。 我的右下角有一個底部浮動動作按鈕，隱藏了最后一項。

所以，我在列表的末尾添加了一個假的空白項目，以便我可以將其向上滾動一點。

這很簡單而且很棘手。 我希望它也適合你，如果你添加一些空白的itens或一個足夠寬的空白項目。

編輯1：

假設您的數據數組是這樣的： [{title: "Item 1"}, {title: "Item 2"}]

您必須將新的空白項連接到數據數組，同時將其傳遞給<FlatList> ，如下所示：

<FlatList
   keyboardShouldPersistTaps="handled"
   data={this.state.examples.concat({title:"\n\n\n\n\n"})}
   keyExtractor={(item, index) => index.toString()}
   renderItem={this._renderItem}
   contentContainerStyle={{ flex: 1}}/>

調整“\\ n”的數量，直到您可以滾動列表以使其可見。 必須有最低金額。 並確保您的_renderItem不將項高度設置為固定值。