无法在 react-native-reanimated-bottom-sheet 内滚动 Flatlist

Question

我已将包导入react-native-reanimated-bottom-sheet到我的项目中以创建底部工作表行为。在它里面我创建了Faltlist所以我可以有不同的项目（几乎 12 个项目）并滚动它们，问题是底部工作表打开但我无法在其中滚动。

这些是我仅用于测试的项目，我想在底部工作表中滚动它们

const DATA = [
    {
      id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
      title: "First Item"
    },
    {
      id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
      title: "Second Item"
    },
    {
      id: "58694a0f-3da1-471f-bd96-145571e29d72",
      title: "Third Item"
    },
    {
      id: "58694a0f-3da1-471f-bd96-245571e29d72",
      title: "Third Item"
    },
    {
      id: "58694a0f-3da1-471f-bd96-345571e29d72",
      title: "Third Item"
    },
    {
      id: "58694a0f-3da1-471f-bd96-445571e29d72",
      title: "Third Item"
    },
    {
      id: "58694a0f-3da1-471f-bd96-745571e29d72",
      title: "Third Item"
    },
    {
      id: "58694a0f-3da1-471f-bd96-845571e29d72",
      title: "fourth Item"
    }
  ];

我的工作表代码是这样的，它在showCarTypesModal变为真后显示

     { showCarTypesModal == true && 
            <BottomSheet
              snapPoints = {[450, 300, 0]}
              renderContent = { () => 
                <View style={{ backgroundColor: "white" }}>
                <FlatList
                data={DATA}
                renderItem={({ item }) =>  <View style={{height: 80, width: "100%"}}><Text style={{color: "blue"}}> {item.title} </Text></View> }
                keyExtractor={item => item.id}
                />
                </View>
              }
            />
          }

Answer 1

我认为你的容器应该有flex: 1

            <BottomSheet
              renderContent = { () => 
                <View style={{ flex:1 backgroundColor: "white" }}>
                <FlatList
                ..../>
                </View>
              }
            />