react native仿QQ左划

qq_38710423

已于 2022-09-08 16:20:50 修改

阅读量879

点赞数

文章标签： react native ios android

于 2022-09-08 16:18:50 首次发布

本文链接：https://blog.csdn.net/qq_38710423/article/details/126766842

版权

使用PanResponder 和 Animated.timing 完成的一个仿QQ左划出现删除编辑的组件。

1、关键代码

<Animated.View style={{
  flexDirection: "row",
  transform: [{ translateX }],
}}{...PanResponder.create({
  // 要求成为响应者：
  onStartShouldSetPanResponder: (evt, gestureState) => {
    return false;
  },
  onMoveShouldSetPanResponder: (evt, gestureState) => {
    if (Math.abs(gestureState.dx) > 8 && Math.abs(gestureState.dy) < 8) {
      scrollCallBack && scrollCallBack(false);
      return true;
    }
  },
  // onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
  onPanResponderGrant: (evt, gestureState) => {
    // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
    this.handlerSeekGrant(evt, gestureState);
  },
  onPanResponderMove: (evt, gestureState) => {
    // 最近一次的移动距离为gestureState.move{X,Y}
    this.handlerSeekMove(evt, gestureState);
    // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
  },
  onPanResponderTerminationRequest: (evt, gestureState) => {
    if (Platform.OS === "ios") {
      let maxX = this.props.buttonViewWidth;
      let changeX = this.pageXEnd - this.pageXStart;
      let translateX = Math.abs(changeX) > maxX / 4 ? -maxX : 0;
      Animated.timing(this.state.translateX, {
        toValue: translateX,
        duration: 300,
        useNativeDriver: false,
        isInteraction: false,
      }).start();
      if (this.rightBack) this.rightBack = false;
      return true;
    } else {
      return true;
    }
  },
  onPanResponderTerminate: (evt, gestureState) => {
    if (Platform.OS === "android") {
      let maxX = this.props.buttonViewWidth;
      let changeX = this.pageXEnd - this.pageXStart;
      let translateX = Math.abs(changeX) > maxX / 4 ? -maxX : 0;
      Animated.timing(this.state.translateX, {
        toValue: translateX,
        duration: 300,
        useNativeDriver: false,
        isInteraction: false,
      }).start();
      if (this.rightBack) this.rightBack = false;
      return true;
    } else {
      return true;
    }
  },
  onPanResponderRelease: (evt, gestureState) => {
    // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
    // 一般来说这意味着一个手势操作已经成功完成。
    this.handlerSeekRelease(evt, gestureState);
    scrollCallBack && scrollCallBack(true);
  },
}).panHandlers}>

2、handlerSeekGrant方法

handlerSeekGrant(evt, gestureState) {
  this.pageXStart = evt.nativeEvent.pageX;
}

3、handlerSeekMove方法

//手势拖动
handlerSeekMove(evt, gestureState) {
  let x = evt.nativeEvent.pageX;
  let maxX = this.props.buttonViewWidth;
  this.pageXEnd = x;
  let changeX = this.pageXEnd - this.pageXStart;
  let translateX = 0;
  if (changeX < 0) {//左
    if (this.state.translateX.__getValue() === -maxX) {
      translateX = -maxX;
    } else {
      translateX = Math.abs(changeX) > maxX ? -maxX : changeX;
    }
  } else {
    if (this.state.translateX.__getValue() < 0) {
      translateX = Math.abs(-(maxX - changeX)) > maxX ? 0 : -(maxX - changeX);
    } else {
    }
  }
  this.setState({
    translateX: new Animated.Value(translateX),
  }, () => this._eventEmitter());
}

4、handlerSeekRelease方法

//手势结束
handlerSeekRelease(evt, gestureState) {
  let x = evt.nativeEvent.pageX;
  let maxX = this.props.buttonViewWidth;
  this.pageXEnd = x;
  let changeX = this.pageXEnd - this.pageXStart;
  let translateX = 0;
  if (changeX < 0 || changeX === 0) {//左
    translateX = Math.abs(changeX) > maxX / 4 ? -maxX : 0;
    //如果已经在最做边则往左边拉的时候不做操作
    if (this.state.translateX.__getValue() === -this.props.buttonViewWidth) translateX = -maxX;
  } else if (changeX > 0) {//右
    translateX = Math.abs(changeX) > maxX / 4 ? 0 : -maxX;
  }
  Animated.timing(this.state.translateX, {
    toValue: translateX,
    duration: 300,
    useNativeDriver: false,
    isInteraction: false,
  }).start();
  if (this.rightBack) this.rightBack = false;
}

5、全部代码

import React, { Component } from "react";
import {
  StyleSheet,
  View,
  PanResponder,
  Animated,
  DeviceEventEmitter,
  Platform,
} from "react-native";
import propTypes from "prop-types";


class LeftStrokeComponent extends Component {
  static propTypes = {
    mainChildren: propTypes.element,
    buttonChildren: propTypes.element,
    buttonViewWidth: propTypes.number,
    id: propTypes.any,
    scrollCallBack: propTypes.func,
  };

  constructor(props) {
    super(props);
    this.state = {
      translateX: new Animated.Value(0),
    };
    this.pageXStart = null;
    this.pageXEnd = null;

    this.rightBack = true;//用于判断只要其中一个滚动 其他的就收回

  }

  render() {
    const { translateX } = this.state;
    const { mainChildren, buttonChildren, scrollCallBack } = this.props;
    return (
      <View style={styles.container}>
        <Animated.View style={{
          flexDirection: "row",
          transform: [{ translateX }],
        }}{...PanResponder.create({
          // 要求成为响应者：
          onStartShouldSetPanResponder: (evt, gestureState) => {
            return false;
          },
          onMoveShouldSetPanResponder: (evt, gestureState) => {
            if (Math.abs(gestureState.dx) > 8 && Math.abs(gestureState.dy) < 8) {
              scrollCallBack && scrollCallBack(false);
              return true;
            }
          },
          // onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
          onPanResponderGrant: (evt, gestureState) => {
            // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
            this.handlerSeekGrant(evt, gestureState);
          },
          onPanResponderMove: (evt, gestureState) => {
            // 最近一次的移动距离为gestureState.move{X,Y}
            this.handlerSeekMove(evt, gestureState);
            // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
          },
          onPanResponderTerminationRequest: (evt, gestureState) => {
            if (Platform.OS === "ios") {
              let maxX = this.props.buttonViewWidth;
              let changeX = this.pageXEnd - this.pageXStart;
              let translateX = Math.abs(changeX) > maxX / 4 ? -maxX : 0;
              Animated.timing(this.state.translateX, {
                toValue: translateX,
                duration: 300,
                useNativeDriver: false,
                isInteraction: false,
              }).start();
              if (this.rightBack) this.rightBack = false;
              return true;
            } else {
              return true;
            }
          },
          onPanResponderTerminate: (evt, gestureState) => {
            if (Platform.OS === "android") {
              let maxX = this.props.buttonViewWidth;
              let changeX = this.pageXEnd - this.pageXStart;
              let translateX = Math.abs(changeX) > maxX / 4 ? -maxX : 0;
              Animated.timing(this.state.translateX, {
                toValue: translateX,
                duration: 300,
                useNativeDriver: false,
                isInteraction: false,
              }).start();
              if (this.rightBack) this.rightBack = false;
              return true;
            } else {
              return true;
            }
          },
          onPanResponderRelease: (evt, gestureState) => {
            // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
            // 一般来说这意味着一个手势操作已经成功完成。
            this.handlerSeekRelease(evt, gestureState);
            scrollCallBack && scrollCallBack(true);
          },
        }).panHandlers}>
          {mainChildren}
          {buttonChildren}
        </Animated.View>
      </View>
    );
  }

  //手势开始
  handlerSeekGrant(evt, gestureState) {
    this.pageXStart = evt.nativeEvent.pageX;
  }

  //手势拖动
  handlerSeekMove(evt, gestureState) {
    let x = evt.nativeEvent.pageX;
    let maxX = this.props.buttonViewWidth;
    this.pageXEnd = x;
    let changeX = this.pageXEnd - this.pageXStart;
    let translateX = 0;
    if (changeX < 0) {//左
      if (this.state.translateX.__getValue() === -maxX) {
        translateX = -maxX;
      } else {
        translateX = Math.abs(changeX) > maxX ? -maxX : changeX;
      }
    } else {
      if (this.state.translateX.__getValue() < 0) {
        translateX = Math.abs(-(maxX - changeX)) > maxX ? 0 : -(maxX - changeX);
      } else {
      }
    }
    this.setState({
      translateX: new Animated.Value(translateX),
    }, () => this._eventEmitter());
  }

  //手势结束
  handlerSeekRelease(evt, gestureState) {
    let x = evt.nativeEvent.pageX;
    let maxX = this.props.buttonViewWidth;
    this.pageXEnd = x;
    let changeX = this.pageXEnd - this.pageXStart;
    let translateX = 0;
    if (changeX < 0 || changeX === 0) {//左
      translateX = Math.abs(changeX) > maxX / 4 ? -maxX : 0;
      //如果已经在最做边则往左边拉的时候不做操作
      if (this.state.translateX.__getValue() === -this.props.buttonViewWidth) translateX = -maxX;
    } else if (changeX > 0) {//右
      translateX = Math.abs(changeX) > maxX / 4 ? 0 : -maxX;
    }
    Animated.timing(this.state.translateX, {
      toValue: translateX,
      duration: 300,
      useNativeDriver: false,
      isInteraction: false,
    }).start();
    if (this.rightBack) this.rightBack = false;
  }

  _eventEmitter = () => {
    const { id } = this.props;
    this.eventEmitter = DeviceEventEmitter.emit("LEFTSTROKE", { id });
  };


  _onLeftStoke = (params) => {
    if (!this.rightBack) {
      this.rightBack = true;
      const { id } = params;
      if (id === this.props.id) return;
      if (this.state.translateX >= 0) return;
      Animated.timing(this.state.translateX, {
        toValue: 0,
        duration: 300,
        useNativeDriver: false,
        isInteraction: false,
      }).start();
    }
  };

  componentWillUnmount() {
    this.eventEmitter && this.eventReceive.remove();
    this.eventReceive && this.eventReceive.remove();
  }

  componentDidMount() {
    this.eventReceive = DeviceEventEmitter.addListener("LEFTSTROKE", this._onLeftStoke);
  }
}


export default LeftStrokeComponent;
const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    flexDirection: "row",
    backgroundColor: "white",
  },
});

6、使用方法

<View style={styles.container}>
  <FlatList data={data} renderItem={this._renderItem} onEndReachedThreshold={0.3} scrollEnabled={scrollEnabled} />
</View>

_renderItem = ({ item, index }) => {
  return (
    <LeftStrokeComponent mainChildren={this._renderMainChildren()} buttonChildren={this._renderButtonChildren()}
                         buttonViewWidth={160} id={index}
                         scrollCallBack={(scrollEnabled) => this.setState({ scrollEnabled })} />
  );
};