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变为true后显示

     { 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>
              }
            />

Answer 2

按如下所示设置BottomSheet道具：

enabledInnerScrolling={true}
enabledContentGestureInteraction={false}

Answer 3

这并不是真正的答案，但到目前为止，https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/20处的解决方案仍然存在问题，无法正常工作。

我可以推荐另一个组件，它具有相同的功能，但具有虚拟化支持，60 FPS的本机动画，并与FlatList，ScrollView和SectionList集成。

以下是组件：https://github.com/rgommezz/react-native-scroll-bottom-sheet

使用核心FlatList的示例：

import React from 'react';
import { Dimensions, StyleSheet, Text, View } from 'react-native';
import ScrollBottomSheet from 'react-native-scroll-bottom-sheet';

const windowHeight = Dimensions.get('window').height;

function Example() {
  return (
    <View style={styles.container}>
      <ScrollBottomSheet
        componentType="FlatList"
        snapPoints={[128, '50%', windowHeight - 200]}
        initialSnapIndex={2}
        renderHandle={() => (
          <View style={styles.header}>
            <View style={styles.panelHandle} />
          </View>
        )}
        data={Array.from({ length: 200 }).map((_, i) => String(i))}
        keyExtractor={i => i}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text>{`Item ${item}`}</Text>
          </View>
        )}
        contentContainerStyle={styles.contentContainerStyle}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentContainerStyle: {
    padding: 16,
    backgroundColor: '#F3F4F9',
  },
  header: {
    alignItems: 'center',
    backgroundColor: 'white',
    paddingVertical: 20,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20
  },
  panelHandle: {
    width: 40,
    height: 2,
    backgroundColor: 'rgba(0,0,0,0.3)',
    borderRadius: 4
  },
  item: {
    padding: 20,
    justifyContent: 'center',
    backgroundColor: 'white',
    alignItems: 'center',
    marginVertical: 10,
  },
});

它于2020年5月4日发布。

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

3 个答案: