Question

我目前受委托构建一个Android应用程序，该应用程序的时间表会在捏入/捏出时从几分钟，几小时，几天，几周，几个月，几年甚至几十年改变。

当Y轴发生变化时，我设法达到了使代码在小时和几天之间更改时间轴数据的程度，但是切换并没有达到我想要的方式。< / p>

时间轴类型的变化是不稳定的，并且它将在所做的任何Y轴更改中来回更改。

精简版：

在向内收缩时，时间轴会将值“缩小”为较小的增量。在向外捏时，时间轴“增长”到更大的增量。

道具中有一个名为“时间轴”的数组，可根据缩放将值推入其中。

我的目标是使其淡入/淡出以模拟切换并具有合法的“捏”功能。

我希望我现在可以与大家共享“实际”应用程序。我会尽力发布最新消息。我最好的是时间表本身的图片。

时间轴视图

代码如下：

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

  }

}

捏手势响应器视图更改

0 个答案: