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内容？

- EDJ

---

你可以尝试在androidManifest.xml文件中的activity标签中添加android:windowSoftInputMode="adjustPan"吗？ - Alexandre Nicolas

@Kornflexx 我在iOS上遇到了这个问题。 - EDJ

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>

我希望它可以对你起作用。

- zhou Dai

---

我刚刚成功地实现了你的建议。效果非常好！ - EDJ

这是什么.NavHeaderHeight，如何在功能组件中使用它？ - Nitish

@Nitish 这只是一个变量。你可以自己定义它。 - zhou Dai

Answer 2

我曾经遇到过类似的情况。我在右下角添加了一个底部浮动操作按钮，使最后一个项目被隐藏了一点。

因此，我添加了一个虚假的空白项到列表的末尾，这样就可以将其向上滚动更多。

这很简单又有技巧。如果您添加几个空白项或一个足够宽的空白项，希望它能对您有用。

编辑1：

假设您的数据数组是这样的：[{title: "Item 1"}, {title: "Item 2"}] 当将其传递给时，您必须将新的空白项与数据数组合并，如下所示：

<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不将项目高度设置为固定值。

- diogenesgg

---

你觉得你能否给我提供一个将此集成到我上面的代码的示例？ - EDJ

谢谢！我认为这个解决方案有点hacky，因为我的项目将在不同的屏幕尺寸上工作，这将需要手动添加不同数量的/n项到FlatList中。我仍然会寻找其他替代方案，但如果没有找到其他方案，我将把你的答案标记为解决方案。 - EDJ

是的，这有点粗糙。确切地说，你可以忽略设置 "\n" 并将最后一个虚拟项的高度设置为 max(0, list.height - keyboard.height)。 - diogenesgg