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

问题描述

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

I have imported the package react-native-reanimated-bottom-sheet to my project to create bottom sheet behavior. Inside it I created Faltlist so I can have different items (almost 12 items) and scroll through them, the problem is bottom sheet opens but I can't scroll inside it.

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

These are items I have for test only and I want to scroll through them in bottom sheet

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 后显示

and my code for sheet is this, it shows after showCarTypesModal becomes 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>
              }
            />
          }

推荐答案

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

Not really an answer but up to now, the solutions here https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/20 are still way buggy and doesn't work properly.

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

I can recommend another component, it does the same but has virtualization support, native animations at 60 FPS and integrates with FlatList, ScrollView and 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 日发布.

It was published last May 4, 2020.

这篇关于无法在 react-native-reanimated-bottom-sheet 内滚动 Flatlist的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！