0

我正在尝试使用 DraggableFlatlist 并且没有任何渲染。我已经用 FlatList 测试了这部分代码,它渲染得很好。

测试数据:

    const textData = [
    {
      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
      name: 'First Item',
    },
    {
      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
      name: 'Second Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d72',
      name: 'Third Item',
    },
  ];

要呈现的简单文本:

  const textItem = ({ item, drag, isActive }) => (
    <View
      style={{
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
    }}
    >
      <Text>{item.name}</Text>
    </View>
  )

DraggableFlatList:

    return (
        <View
          style={[
            style,
            { backgroundColor: "white", padding: 25, borderRadius: 10 },
          ]}
        >
            <DraggableFlatList
               data={textData}
               renderItem={textItem}
               keyExtractor={(item) => item.id}
               style={{ flex: 1 }}
               onDragEnd={({ data }) => setData(data)}
            />
        </View>
    )

这些版本是相当最新的:

react-native: "0.64.3" react-native-draggable-flatlist: "^3.0.4"

我很困惑为什么 DraggableFlatList 什么都不会渲染,而 FlatList 会渲染文本,我想知道我错过了什么?

顺便说一句,我确实看过Draggable flatlist 没有渲染任何东西,但没有任何乐趣。

4

1 回答 1

0

解决方案是添加一个额外的道具,containerStyle={{ flex : 1 }}像这样:

    return (
        <View
          style={[
            style,
            { backgroundColor: "white", padding: 25, borderRadius: 10 },
          ]}
        >
            <DraggableFlatList
               data={textData}
               renderItem={textItem}
               containerStyle={{ flex : 1 }}
               keyExtractor={(item) => item.id}
               style={{ flex: 1 }}
               onDragEnd={({ data }) => setData(data)}
            />
        </View>
    )
于 2022-01-17T18:52:56.933 回答