如何在模态组件中滚动FlatList?

时间:2019-08-17 15:16:08

标签: react-native

我的水平FlatList不在模态中滚动。您可以在下面找到我的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不会出现。

2 个答案:

答案 0 :(得分:0)

很抱歉将其发布为答案,但是由于我的声誉低下,我无法发表评论。如果对您不起作用,我将删除该答案。

您是否曾尝试过在FlatList上使用contentContainerStyle,像这样:

contentContainerStyle={{ flexGrow: 1 }}

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

答案 1 :(得分:0)

使用propagateSwipe道具在<Modal>中进行平滑滚动

<Modal propagateSwipe>...</Modal>

了解更多信息react-native-modal issue #236