FlatList 在滚动时隐藏答案

【问题标题】：FlatList hides on scrollingFlatList 在滚动时隐藏
【发布时间】：2020-10-29 21:11:49
【问题描述】：

我使用的 FlatList 可能只有一项或多项。但是，当我只有一个项目时，我希望它以某种方式修复。目前，如果我按住它并向下滚动它，它就会开始隐藏。我该如何解决这个问题？

如果我使用scrollEnabled={false}，那么在我有来自 FlatList 的多个项目的情况下它会变得不方便，因为我无法滚动屏幕并查看剩余的项目。

        <View style={styles.listHolder}>
          {data && 
          <FlatList
            data={data.me.pendingUserRelationsRequestsSent.nodes}
            horizontal={false}
            renderItem={({ item }) => (
              <UserItem
                user={item}
                originatorId={data.me.id}
              />
            )}
            keyExtractor={(item) => item.id.toString()}
            ListEmptyComponent={NoRequestsContainer}
          />
            }
          {error && <ErrorContainer />}
        </View>

  listHolder: {
    width: '100%',
  },

UserItem.tsx

 return (
    <View style={styles.item}>
        <Thumbnail
          style={styles.thumbnail}
          source={{
            uri:
              'https://cdn4.iconfinder.com/afro_woman_female_person-512.png',
          }}></Thumbnail>
      <View style={styles.nameContainer}>
        <Text style={styles.userName}>{userName}</Text>
      </View>
      <View style={styles.buttonContainer}>
        <Button
          rounded
          style={styles.cancelButton}
          onPress={() => onCancelRequest(originatorId, user.id)}>
          <Icon name="close" size={moderateScale(20)} color="black" />
        </Button>
      </View>
    </View>
  );
};

export const styles = StyleSheet.create({
  item: {
    backgroundColor: 'white',
    borderRadius: moderateScale(20),
    padding: moderateScale(20),
    marginVertical: moderateScale(8),
    marginHorizontal: 16,
    height: moderateScale(110),
    //width: moderateScale(360),
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  userName: {
    paddingTop: 20,
  },
  buttonContainer: {
    paddingTop: 12,
    marginRight: 2,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  cancelButton: {
    backgroundColor: '#e8403a',
    width: moderateScale(45),
    justifyContent: 'center',
  },
  thumbnail: {
    height: 85,
    width: 85,
    marginLeft: 2,
    paddingRight: 0,
    position: 'relative',
  },
  nameContainer: {
    flexDirection: 'row',
    paddingRight: 30,
  },
});

因为我把它拖下来，它的顶部也有很多空间。这也不应该发生。

【问题讨论】：

贾马尔你的回答奏效了。请改写！

标签： javascript reactjs typescript react-native react-native-flatlist

【解决方案1】：

您可以在scrollEnabled 属性中使用条件语句来检查数据数组的长度。例如，如果您不希望它在只显示一个时滚动scrollEnabled={data.me.pendingUserRelationsRequestsSent.nodes.length > 1}/。

如果你的数据是异步的，我会在状态下处理这个

const [isScrollEnabled, setIsScrollEnabled] = false;

...

const fetchData = async () => {
   const data = await someDataRequest();
   if (data.length > 1) {
     setIsScrollEnabled(true)
   }
}

.... 

return (
    <View style={styles.listHolder}>
      {data && 
      <FlatList
        data={data.me.pendingUserRelationsRequestsSent.nodes}
        horizontal={false}
        scrollEnabled={isScrollEnabled}
        renderItem={({ item }) => (
          <UserItem
            user={item}
            originatorId={data.me.id}
          />
        )}
        keyExtractor={(item) => item.id.toString()}
        ListEmptyComponent={NoRequestsContainer}
      />
        }
      {error && <ErrorContainer />}
    </View>

)

【讨论】：