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>

我希望这个对你有用