如何在两个react-native-swiper组件之间进行拖动？ [英] How to enable dragging between two react-native-swiper components?

问题描述

我正在尝试在两个react-native-swiper组件之间启用拖放。
我使用Animated.Text和PanResponder在底部一个react-native-swiper中拖动文本，并且它的工作方式正确，直到将拖动移到上方一个react-native-swiper组件上为止。

I am trying to enable drag-and-drop between two react-native-swiper components. I used Animated.Text and PanResponder to drag the text in bottom one react-native-swiper and it is working corretly until when the dragging is moved over the above one react-native-swiper componenent. The dragged text is unvisible when dragging over the other react-native-swiper.

有人可以解释正在发生的事情以及如何解决该行为吗？

Could anyone explain what is happening and how to fix the behaviour?

以下是重现行为的简化代码：

Here is the simplefied code to reproduce the behaviour:

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  PanResponder,
  Animated,
  Dimensions } from 'react-native';
import Swiper from 'react-native-swiper';

const SCREEN_WIDTH = Dimensions.get('window').width;

export default class App extends React.Component {
  constructor(props) {
    super(props);

    const position = new Animated.ValueXY();

    const panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (event, gesture) => {
        position.setValue({ x: gesture.dx, y: gesture.dy });
      },
      onPanResponderRelease: () => {}
    });

    this.state = { panResponder, position };
  }

  renderAnimatedText(text) {
    return (
      <Animated.Text
        style={[this.state.position.getLayout(), styles.text]}
        {...this.state.panResponder.panHandlers}
      >
        {text}
      </Animated.Text>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.swiperContainer}>
          <Swiper style={styles.wrapper}>
            <View style={styles.slide3}>
              <Text style={styles.text}>Hello Stephen</Text>
            </View>
            <View style={styles.slide2}>
              <Text style={styles.text}>Hello Helpers</Text>
            </View>
            <View style={styles.slide1}>
              <Text style={styles.text}>Hello World</Text>
            </View>
          </Swiper>
        </View>

        <View style={styles.swiperContainer}>
          <Swiper style={styles.wrapper}>
            <View style={styles.slide1}>
              {this.renderAnimatedText('You are The Best')}
            </View>
            <View style={styles.slide2}>
              <Text style={styles.text}>and Greatest</Text>
            </View>
            <View style={styles.slide3}>
              <Text style={styles.text}>Thank you</Text>
            </View>
          </Swiper>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  swiperContainer: {
    height: 250,
    width: SCREEN_WIDTH
  },
  wrapper: {
  },
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB',
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5',
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9',
  },
  text: {
    color: '#ff0',
    fontSize: 30,
    fontWeight: 'bold',
  }
});

这里还是示例代码
> https://github.com/henkkasoft/drag-and-drop-example

推荐答案

我设法通过设置对刷卡器可见的溢出来解决该问题：

I managed to solve the issue by setting overflow visible for the swiper:

<Swiper style={{ overflow: 'visible' }}>

但不幸的是，这仅适用于iOS。在Android上，这似乎是一个相当大的问题：
https://github.com。 com / facebook / react-native / issues / 6802

But unfortunately this works only on iOS. It seems to be quite major issue on Android: https://github.com/facebook/react-native/issues/6802

任何解决方法或更新使其在Android上都能正常使用。

Any workaround or update to get this to work on Android would be really appreciated.

这篇关于如何在两个react-native-swiper组件之间进行拖动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！