components - 包装器组件内的 React Native Flatlist 打破了scolling

Question

您好，我的包装器组件有问题。如果我放入 Flatlist 组件中，滚动将不再起作用。我尝试到处使用 flex:1 （在平面列表上，在包装器本身上），但没有任何更改仍然损坏。

我的错误是什么？

我期望正常的滚动行为。

import React from 'react';
import { KeyboardAvoidingView, TouchableWithoutFeedback, Keyboard, Platform } from 'react-native';


const KeyboardAvoidingViewWrapper = ({ children, keyboardOffset }) => {
  const additionalOffset = Platform.OS === 'ios' ? 0 : 17;
  return (
    <KeyboardAvoidingView
      keyboardVerticalOffset={keyboardOffset ? keyboardOffset + additionalOffset : 65 + additionalOffset}
      behavior={Platform.OS == "ios" ? "padding" : "height"}
      style={{ flex: 1, }}
    >
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        {children}
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  )

}

export default KeyboardAvoidingViewWrapper;

在屏幕中：

<KeyboardAvoidingViewWrapper>
      <View style={{ flex: 1 }}>
        <FlatList
          data={data}
           .....
        />
</View>
</KeyboardAvoidingViewWrapper>

任何帮助都不仅仅是感激。谢谢你。

Answer 1

尝试为您的KeyboardAvoidingView赋予行为属性“位置”。

<KeyboardAvoidingView behavior='position'>