Animation 出现不同背景的滑动动画，正确覆盖

我正在尝试制作一个滑块动画，就像你在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>
    );
  }
}

从'react native'导入{PanResponder，View，Text，Dimension}；
const{width}=Dimension.get（'window'）；
常数总宽度=宽度-50；
类滑块扩展了React.Component{
t=导出和删除的幻灯片；
状态={
按钮\u转换\u x:0
};
向右移动（事件，dx）{
如果（dx>0&&event.nativeEvent.pageX{
这个.move_right（evt，gestureState.dx）；
},
onPanResponderRelease：（evt，手势状态）=>{
此.release_处理程序（evt，gestureState）；
}
});
平滑_边距（）{
如果（this.state.button_translate_x算出了

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

从'react native'导入{PanResponder}；
常数总宽度=宽度-50；
类滑块扩展了React.Component{
t=导出和删除的幻灯片；
状态={button_translate_x:0}；
pan_responder=PanResponder.create({
onStartShouldSetPanResponder:（evt，手势状态）=>真，
onPanResponderMove：（evt，{dx}）=>{
如果（dx>0&总宽度-50>=dx）{
这个.setState（{button_translate_x:dx}）；
}
},
onPanResponderRelease:（{nativeEvent:{pageX}，{dx}）=>{
如果（总宽度-50-dx