Question

我做了一个拖累＆amp;删除组件上的功能，这些组件放在带坐标的元素上，在Android上一切都很好。

但在iOS上，我的动画视图包含所有panResponder＆amp;处理程序看起来更大并且不适合它们的内容，所以当我选择一个要拖动的元素时，我笨拙地选择顶部或下面的元素。

                {this.dataDrag.map((d, index) => (
                    <View 
                        style={[this.smileyStyles(index)]}
                        key={index}
                    >
                        <Animated.View
                            {...this.getPanResponder(index).panHandlers}
                            style={[this.pan[index].getLayout(), styles.circle]}>
                            <View style={{width: '100%'}}>
                                <Image
                                    source={this.sourceSmiley(index)}
                                    resizeMode= 'contain'
                                    style={{width: '100%'}}
                                />
                            </View>
                        </Animated.View>
                    </View>
                ))}

这是我显示包含要拖动的图像的视图的方式

有styles.circle：

const styles = StyleSheet.create({
circle: {
    backgroundColor: 'transparent',
    width: CIRCLE_RADIUS*2,
    height: CIRCLE_RADIUS*2,
    justifyContent: 'center',
    alignItems: 'center',
}

}）;

每个动画视图的位置都是绝对的。

//returned from: this.pan[index].getLayout()
ravi: {
    position    : 'absolute',
    top         : Window.height/5 - CIRCLE_RADIUS,
    left        : Window.width/5 - CIRCLE_RADIUS,
},

还有我的泛事件。

getPanResponder(index) {
    return PanResponder.create({
        onStartShouldSetPanResponder: () => true,

        onPanResponderMove: (e, gestureState) => {

            Animated.event([null,{
                dx  : this.pan[index].x,
                dy  : this.pan[index].y,
            }])(e, gestureState)
            //this.moveScroll(this.pan[index].x, this.pan[index].y, index)
        },

        onPanResponderRelease: (e, gesture) => {
            var theKey = this.isDropZone(gesture)
            var theMood = this.setTheActualMood(index)
            if (theKey) {
                this.setHumeur( theKey, theMood  )
                this.changeColor( theKey, theMood )
            }

            Animated.spring(
                this.pan[index],
                {toValue:{x:0,y:0}}
            ).start();

            //this.scrollViewProjects.scrollTo({y: 0})
        }
    });    
}

有人会遇到类似的问题吗？我不知道我是否已经清楚^^

Answer 1

解决方案：

如果您在IOS上遇到动画元素的panstart响应问题，请添加＆＃34; overflow：hidden＆＃34;在你的AnimatedView上它会很顺利。

它对我有用。

Pan Responder区域太大 - React Native

1 个答案: