React Native -Flatlist无法到达底部

Question

我有一个面板，其中键盘始终是启动，因为我不希望用户将其解散。在那个面板中，我有一个看起来像这样的列表：

<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:"nnnnn"})}
   keyExtractor={(item, index) => index.toString()}
   renderItem={this._renderItem}
   contentContainerStyle={{ flex: 1}}/>

调整" n"的数量，直到您可以滚动列表可见为止。必须有最低数量。并确保您的 _renderItem不会将项目高点设置为固定值。