React Native Reanimated 2 冲突 FlatList 和 PanGestureHandler

Question

我正在尝试创建具有滑动删除功能的垂直平面列表。因此，我的平面列表的每个项目都由 PanGestureHandler 额外处理我的问题是，当我尝试滚动时，我的平面列表滚动不起作用，因为滚动视图动画和平移手势动画之间存在冲突。我试过使用 simultaneousHandlers 但它没有帮助。我还尝试使用 react-native-gesture-handler 和 react-native 中的 FlatList 结果是一样的。

<View style={styles.container}>
            <Header data={{headerText: 'Contacts', leftIcon: 'arrow-left', line: true}}/>
            <FlatList
                ref={scrollRef}
                data={contacts}
                renderItem={({item}) => <Item simultaneousHandlers={scrollRef} {...{item}} />}
                bounces={false}
                showsVerticalScrollIndicator={false}
                style={{paddingLeft: wp('5%'), paddingTop: hp('2%')}}>
            </FlatList>
            <TouchableOpacity style={styles.touchableOpacity} onPress={() => navigation.navigate('AddContact')}>
                <View>
                    <Text style={styles.textButton}> Add Contact </Text>
                </View>
            </TouchableOpacity>
        </View>

项目：

<Animated.View style={[rTaskContainerStyle]}>
                    <Animated.View style={[styles.iconContainer, rIconContainerStyle]}>
                        <Icon name={'trash-2'} size={25} color={'red'} />
                    </Animated.View>
                    <View>
                    <PanGestureHandler {...simultaneousHandlers} onGestureEvent={panGestureHandler}>
                        <Animated.View style={[rStyle,{backgroundColor: '#FFFFFF'}]}>
                            <Text style={{color: '#09101D', fontFamily: 'SourceSansPro_600SemiBold', fontSize: 18}}>
                                {info.fullName}
                            </Text>
                            <Text style={{color: '#545D69', fontFamily: 'SourceSansPro_400Regular'}}>
                                {info.publicKey}
                            </Text>
                        </Animated.View>
                    </PanGestureHandler>
                    </View>
                </Animated.View>

Answer 1

您应该为 pan-gesture 添加偏移量。你的 PanGestureHanler 应该是

<PanGestureHandler
  failOffsetY={[-5, 5]}
  activeOffsetX={[-5, 5]}
  onGestureEvent={gestureHandler}
>

可能对你有帮助。

React Native Reanimated 2 冲突 FlatList 和 PanGestureHandler

React Native Reanimated 2 conflict FlatList and PanGestureHandler

react-native

react-native-reanimated

react-native-reanimated-v2