Question

我试图制作滑块动画，就像你在iPhone上关闭iOS时获得的那样。这是我到目前为止所拥有的，它是独立的。

import {PanResponder, View, Text, Dimension} from 'react-native';
const {width} = Dimension.get('window');
const TOTAL_WIDTH = width - 50;

class slider extends React.Component {
  t = <Text>Slide to Export & Delete</Text>;
  state = {
    button_translate_x: 0
  };

  move_right(event, dx) {
    if (dx > 0 && event.nativeEvent.pageX <= TOTAL_WIDTH) {
      if (dx === width - 50) {
        this.setState({button_translate_x: 0});
      } else {
        this.setState({button_translate_x: dx});
      }
    }
  }

  release_handler(e, gs) {
    const diff = Math.abs(e.nativeEvent.pageX - TOTAL_WIDTH);
    if (diff <= 5) {
      this.setState({button_translate_x: gs.dx});
    } else {
      this.setState({button_translate_x: 0});
    }
  }

  pan_responder = PanResponder.create({
    onStartShouldSetPanResponder: (evt, gestureState) => true,
    onPanResponderMove: (evt, gestureState) => {
      this.move_right(evt, gestureState.dx);
    },
    onPanResponderRelease: (evt, gestureState) => {
      this.release_handler(evt, gestureState);
    }
  });

  smoothing_margin() {
    if (this.state.button_translate_x <= 25)
      return Math.abs(this.state.button_translate_x - 20);
    else return 0;
  }

  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <View
          style={{
            alignItems: 'center',
            borderRadius: 25,
            width: TOTAL_WIDTH,
            backgroundColor: 'orange'
          }}>
          <View
            style={{
              width: this.state.button_translate_x,
              alignItems: 'center',
              justifyContent: 'center',
              position: 'absolute',
              backgroundColor: 'blue',
              borderRadius: 25,
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              zIndex: -1,
              marginVertical: this.smoothing_margin()
            }}
          />
          <View
            style={{
              position: 'absolute',
              alignItems: 'center',
              justifyContent: 'center',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              zIndex: -2
            }}>
            {this.t}
          </View>
          <View
            style={{
              alignSelf: 'flex-start',
              width: 50,
              transform: [{translateX: this.state.button_translate_x}],
              height: 50,
              borderRadius: 25,
              backgroundColor: 'red'
            }}
            {...this.pan_responder.panHandlers}
          />
        </View>
      </View>
    );
  }
}

但这是错误的，因为初始幻灯片的蓝色从橙色视图的圆角边界出来。我试图用marginVertical聪明一点，但不确定这是否是正确的方法。
向右滑动是不正确的，因为蓝色应该至少覆盖在圆圈的中间，但是当前写入只会向上移动到左侧。

帮助表示感谢。

Answer 1

想出来！

import {PanResponder} from 'react-native';

const TOTAL_WIDTH = width - 50;

class slider extends React.Component {
  t = <Text>Slide to Export & Delete</Text>;
  state = {button_translate_x: 0};

  pan_responder = PanResponder.create({
    onStartShouldSetPanResponder: (evt, gestureState) => true,
    onPanResponderMove: (evt, {dx}) => {
      if (dx > 0 && TOTAL_WIDTH - 50 >= dx) {
        this.setState({button_translate_x: dx});
      }
    },
    onPanResponderRelease: ({nativeEvent: {pageX}}, {dx}) => {
      if (TOTAL_WIDTH - 50 - dx <= 5) {
        console.log('Success zone');
      } else {
        this.setState({button_translate_x: 0});
      }
    }
  });

  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <View
          style={{
            alignItems: 'center',
            borderRadius: 25,
            width: TOTAL_WIDTH,
            backgroundColor: 'orange'
          }}>
          <View
            style={{
              position: 'absolute',
              alignItems: 'center',
              justifyContent: 'center',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              zIndex: -2
            }}>
            {this.t}
          </View>
          <View
            style={{
              alignSelf: 'flex-start',
              width: 50,
              transform: [{translateX: this.state.button_translate_x}],
              height: 50,
              borderRadius: 25,
              backgroundColor: 'red'
            }}
            {...this.pan_responder.panHandlers}
          />
          <View
            style={{
              borderRadius: 25,
              position: 'absolute',
              top: 0,
              bottom: 0,
              right: 0,
              left: 0,
              backgroundColor: 'blue',
              height: 50,
              width: this.state.button_translate_x + 50,
              zIndex: -1
            }}
          />
        </View>
      </View>
    );
  }
}

滑动动画与不同的背景即将出现，正确的叠加

1 个答案: