Pinch Gesture Responder Просмотр Изменить

Question

В настоящее время мне поручено создать приложение для Android с временной шкалой, которая должна изменяться от минут, часов, дней, недель, месяцев, месяцев до десятилетий при вводе / выводе.

Мне удалось пройти достаточно далеко, чтобы код изменил данные временной шкалы между часами и днями, когда происходит изменение по оси Y, но переключение не совсем работает так, как мне бы хотелось.

Изменения типа временной шкалы являются ошибочными, и они будут меняться взад и вперед при любых изменениях оси Y.

Укороченная версия:

На прижиме внутрь,временная шкала сокращает значения до меньших приращений.В режиме outward-pinch шкала времени увеличивает значения до больших приращений.

В подпорках есть массив с именем timeline, который помещает в него значения в зависимости от масштаба.

Myцель состоит в том, чтобы заставить его исчезать / исчезать для имитации переключения и иметь законную функцию «щепотки», чтобы сделать это.вы ребята в данный момент.Я буду публиковать обновления, как могу.Лучшее, что у меня есть, это изображение самой временной шкалы.

Просмотр временной шкалы

Код выглядит следующим образом:

class Timeline extends Component {
  constructor(props) {
    super(props);
    this.state = {
      touches: null,
      pageYStart: null,
      pageYEnd: null,
      displayAsType: 0
    };
  }

  // Push new route to view
  route = (path) => {
    this.props.history.push(path)
  }

  //Responds to the user's touch on the screen. 
  onStartShouldSetResponder = (e) => {
    //If there are two fingers on the screen, it sets the state to 2 so it starts responding and talking to the movement responder.
    if (e.nativeEvent.touches.length === 2) {
      this.setState({ touches: e.nativeEvent.touches.length, pageYStart: e.nativeEvent.pageY })
      //should always return true. If it doesn't, onResponderRelease/onResponderMove cannot be called.
      return true
    }
    return false
  }

  //This responds to the movement on the screen.
  onResponderMove = (e) => {
    //sets the ending coordinates of the Y position to a variable and sets it into state. 
    let pageYEnd = e.nativeEvent.pageY
    this.setState({ pageYEnd })
    // console.log(`pageY start: ${this.state.pageYStart}, pageY end: ${pageYEnd}`)
    //If the Y start coordinate is less than where the Y ended, the device will count that as a "zoom out".
    if (this.state.pageYStart < pageYEnd) {
      let displayAsType = this.state.displayAsType
      displayAsType++
      displayAsType >= 1 ? this.setState({displayAsType: 1}) : this.setState({displayAsType})
      console.log(this.state.displayAsType)
      console.log('zoomed in')
      //If the Y start coordinate is less than where the Y ended, the device will count that as a "zoom in"
    } else if (this.state.pageYStart > pageYEnd) {
      let displayAsType = this.state.displayAsType
      displayAsType--
      displayAsType <= 0 ? this.setState({displayAsType: 0}) : this.setState({displayAsType})
      console.log(this.state.displayAsType)
      console.log('zoomed out')
    }
    //Add more cases for display in hours, days, weeks, months, years. 
    switch(this.state.displayAsType){
      case 0: {
        //sets the timeline that's rendered to hours 
        this.props.timelineToHours();
        break;
      }
      case 1: {
        this.props.timelineToDays();
        break;      
      }
      default:
      timelineToHours();
    }
  }

  render() {

    let timeline = this.props.timeline
    return (
      <View
        onStartShouldSetResponder={this.onStartShouldSetResponder}
        onResponderMove={this.onResponderMove}
        onResponderRelease={this.onResponderRelease}
      >
        <ScrollView
          style={styles.contentContainer}>
          {timeline.map((time, i) => {
            return <TouchableOpacity style={time.time === '12am' ? styles.dayDivider : styles.timeContainer} key={i}>
              <Text>{time.time}</Text>
            </TouchableOpacity>
          })}
        </ScrollView>
      </View>
    );

  }

}