如何在 Modal 组件中滚动 FlatList？答案

【问题标题】：How to scroll FlatList in Modal component?如何在 Modal 组件中滚动 FlatList？
【发布时间】：2019-08-17 15:16:08
【问题描述】：

我的水平平面列表在模态中不滚动。您可以在下面找到我的 FlatList 和 RenderItem 代码：

    <FlatList
        data={this.props.selectedGroupData.groupMembersList}
        renderItem={this.ilgiliKisiler}
        keyExtractor={item => item.uid}
        nestedScrollEnabled={true}
        horizontal={true}
        removeClippedSubviews={true}
        />

    </View>

和renderItem函数：

    ilgiliKisiler = ({ item }) => {
    console.log("on Related Users item => ", item);
    return (
      <TouchableOpacity style={{flex: 1}}>
        <View style={{ flexDirection: "row" }}>
          <View style={styles.relatedUsersContainer}>
            <View style={{ alignItems: "center" }}>
              <Image
                source={
                  item.avatar
                    ? { uri: item.avatar }
                    : require("../../assets/images/defaultAvatar.png")
                }
                style={styles.relatedUsersImage}
              />
            </View>
            <View style={{ flexDirection: "column" }}>
              <Text style={styles.relatedUsersText} numberOfLines={2}>
                {item.name}
              </Text>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

在这篇文章之前，我找到了一些解决方案，例如style={{flex: 1}}。当我尝试这个解决方案时，我的 renderItem 没有出现。

【问题讨论】：

标签： react-native

【解决方案1】：

使用propagateSwipe 属性在<Modal> 中平滑滚动

<Modal propagateSwipe>...</Modal>

更多详情react-native-modal issue #236

【讨论】：

【解决方案2】：

很抱歉将其发布为答案，但由于我的声誉低，我无法发表评论。如果它不适合你，我会删除这个答案。

您是否尝试过像这样在 FlatList 上使用 contentContainerStyle：

contentContainerStyle={{ flexGrow: 1 }}

您可以通过以下链接了解更多关于 contentContainerStyle 的信息：https://facebook.github.io/react-native/docs/scrollview#contentcontainerstyle

【讨论】：

对不起，这不是一个正确的答案。在您的<View> 组件中使用style:{{ flex: 1 }} 并不重要。但是，感谢您的努力和回复。我找到了正确的答案并发布在下面。

【解决方案3】：

将平面列表包装在滚动视图中。它应该可以工作。

<Scrollview>
<Flatlist />
</Scrollview>

【讨论】：