React Native Reanimated 2 冲突 FlatList 和 PanGestureHandler

lan*_*rew 1 react-native react-native-reanimated react-native-reanimated-v2

我正在尝试创建具有滑动删除功能的垂直平面列表。因此,我的平面列表的每个项目均由PanGestureHandler我的问题是当我尝试滚动时,由于滚动视图动画与平移手势动画之间的冲突,我的平面列表滚动不起作用。我尝试过使用simultaneousHandlers但没有帮助。我也尝试使用FlatListfromreact-native-gesture-handler和 fromreact-native结果是一样的。

<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>
Run Code Online (Sandbox Code Playgroud)

物品:

<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>
Run Code Online (Sandbox Code Playgroud)

Jay*_*Jay 17

您应该为平移手势添加偏移量。你的 PanGestureHanler 应该是

<PanGestureHandler
  failOffsetY={[-5, 5]}
  activeOffsetX={[-5, 5]}
  onGestureEvent={gestureHandler}
>
Run Code Online (Sandbox Code Playgroud)

它可能对你有帮助。