React Native Pan Responder无法正常工作

Question

也许我误会了一些东西。我正在尝试创建一个组件，该组件将处理左右滑动操作以切换删除按钮，该按钮应从右侧（左滑动）滑入并有选择地关闭（右滑动）。但是，当我在一个列表项上滑动时，它们都会对我的怪异滑动动作做出反应，因为正在为列表项的每个实例创建平移响应器。

我的父容器组件如下：

_renderRows() {
  return this.props.organizations.map((organization, index) => {
    return (
      <SwipableButton key={index}>
        <DetailListItem onPressHandler={this.onPressHandler} data={organization}/>
      </SwipableButton>
    );
  });
}

可滑动组件如下：

export default class SwipableButton extends Component {

  constructor(props) {
    super(props);

    this._animate = new Animated.Value(0);
  }

  _panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onMoveShouldSetPanResponder: () => true,
    onPanResponderMove: (event, gesture) => {

      /**
       * Swipe left detection
       */
      if (gesture.dx < -SWIPE_THRESHOLD) {
        this.toggleButtonActiveStatus('left');
      }

      /**
       * Swipe right detection
       */
      if (gesture.dx > SWIPE_THRESHOLD) {
        this.toggleButtonActiveStatus('right');
      }
    }
  });

  toggleButtonActiveStatus(direction) {
    if (direction === 'left') {
      Animated.timing(this._animate, {
        toValue: -100,
        duration: 300
      }).start();
    } else {
      Animated.timing(this._animate, {
        toValue: 0,
        duration: 300
      })
    }
  }

  render() {
    const { data } = this.props;

    return (
      <View style={[Styles.row]}>
        <Animated.View
            style={[Styles.slider, {marginLeft: this._animate}]}
            {...this._panResponder.panHandlers}>
          {this.props.children}
        </Animated.View>
      </View>
    );
  }
}

我允许渲染两个项目：

从一个项目上向左滑动的预期结果是该项目将向左移动，但是两个项目都将移动。

我想说我已经尝试了很多方法来使它起作用，但是我真的不知道为什么它会以这种方式起作用。任何帮助或使我有任何资源来理解这一点都将是非常好的。

谢谢。