React Native - FlatList 无法到达底部答案

【问题标题】：React Native - FlatList unable to reach bottomReact Native - FlatList 无法到达底部
【发布时间】：2019-07-27 12:35:37
【问题描述】：

我有一个面板，其中键盘始终处于打开状态，因为我不希望用户关闭它。在那个面板中，我有一个 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 的全部内容的同时保留打开的键盘（并禁用被关闭的功能）？

【问题讨论】：

您可以尝试将 android:windowSoftInputMode="adjustPan" 添加到您的活动选项卡到您的 androidManifest.xml 中吗？
@Kornflexx 我在 iOS 上遇到了这个问题。

标签： javascript react-native keyboard scrollview

【解决方案1】：

我也遇到过类似的情况。我在右下角有一个底部浮动操作按钮，将最后一项隐藏了一点。

所以，我在列表末尾添加了一个假空白项，以便我可以将其向上滚动一点。

这既简单又棘手。如果您添加一些空白项或一个足够宽的空白项，我希望它也适用于您。

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

【讨论】：

您认为您可以提供一个将其集成到我上面的代码中的示例吗？
谢谢！我认为这个解决方案有点 hacky，因为我的项目将在不同的屏幕尺寸上工作，这需要手动添加到 FlatList 的不同数量的 /n 项目。我仍然会寻找其他替代方案，但如果没有找到其他替代方案，我会将您的答案标记为解决方案。
是的，这有点 hacky。准确地说，你可以忘记设置"\n"s，如果最后一个假项目设置为max(0, list.height - keyboard.height)，则设置高度。

【解决方案2】：

您可以添加键盘监听事件来获取键盘的高度。

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>

希望对你有用

【讨论】：

我刚刚设法实施了您的建议。作为一个魅力工作！