0

我在一个项目中使用 react-native-scroll-bottom-sheet ，就像文档中所说的那样，但最终我仍然无法在 BottomSheet 中滚动我的 FlatList。我想这是因为复活的lib。但是文档说我可以使用 v2+ 版本...

"react-native": "0.64.1",    
"react-native-scroll-bottom-sheet": "^0.7.0",   
"react-native-reanimated": "^2.2.0",
"react-native-gesture-handler": "^1.8.0",

我的 BottomSheet 组件如下所示：

<ScrollBottomSheet<any>
                        componentType="FlatList"
                        topInset={24}
                        ref={sheetRef}
                        enableOverScroll={true}
                        snapPoints={[40, '50%']}
                        initialSnapIndex={1}
                        renderHandle={() => (
                            <View style={{
                                alignItems: 'center',
                                backgroundColor: 'white',
                                paddingVertical: 20,
                                borderTopLeftRadius: 20,
                                borderTopRightRadius: 20
                            }}>
                                <View style={{
                                    width: 40,
                                    height: 2,
                                    backgroundColor: 'rgba(0,0,0,0.3)',
                                    borderRadius: 4
                                }} />
                            </View>
                        )}
                        initialNumToRender={5}
                        data={restaurants}
                        keyExtractor={i => `${i.name}${Math.random()}`}
                        renderItem={({ item }: any) => (
                            <View style={{
                                paddingLeft: 20,
                            }}>
                                <ImageBackground source={require('../../assets/images/test-restaurant.png')} style={styles.restaurantImage} imageStyle={{borderRadius: 16}}>
                                    <Text style={styles.restaurantTimestamp}>Opens at 08.00</Text>
                                </ImageBackground>
                                <Text style={styles.restaurantTitle}>{item.name}</Text>
                                <Text style={styles.restaurantOptions}>{item.price === 'high' ? '$$$' : ''}{item.cuisines.map((c: any) => (`· ${c}`))}</Text>
                                <View style={styles.restaurantAdditionalContainer}>
                                    <Text style={styles.restaurantDiscount}>-15%</Text>
                                    <Text style={styles.restaurantCookingTime}>
                                        <Image source={require('../../assets/icons/RestaurantCookingTimeIcon.png')} style={styles.restaurantCookingTimeIcon}/>
                                        20-25 min
                                    </Text>
                                </View>
                            </View>
                        )}
                        contentContainerStyle={{backgroundColor: '#FFF'}}
                    />

我希望有人有同样的问题，所以你可以帮助我

4

0 回答 0