0

我对组件进行了拖放功能，这些组件被拖放到坐标中的元素上，在 Android 上一切正常。

但是在 iOS 上，具有所有 panResponder 和处理程序的动画视图似乎更大并且不适合它们的内容，因此当我选择一个要拖动的元素时，我笨拙地选择了顶部或下方的那个。

                {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})
        }
    });    
}

有人遇到类似的问题吗？不知道我有没有说清楚^^

4

1 回答 1

0

解决方案：

如果您在 IOS 上遇到 Animated 元素的 panstart 响应程序问题，请在您的 AnimatedView 上添加“溢出：隐藏”，它会顺利进行。

这个对我有用。

于 2018-04-10T07:33:00.610 回答