当用户通过触摸触发它时，如何串行显示一个又一个接一个的图像

Question

我想执行书籍开放和关闭的动画

• 我需要执行的动画是从1个图像到另一个图像的过渡
• 我有3个不同的图像

我与插值部件混淆了静止图像的输入范围和输出范围什么值？

？

我正在尝试做这些：

1. 第一张图像显示为默认值
2. 当用户单击它时，图像后应更改为另一个图像小延迟应该再次向用户显示1更多图像

这就是我所做的：

export default class animateBook extends Component {
state = {
  Triggered: false,
  BookClosed: false
}
changingImages() {
if (this.state.Triggered === false) {
  return (
    <Image
    source={require('./Images/front_cover.png')}
    style={styles.frontCoverStyle} />
  );
}
 if (this.state.Triggered === true && this.state.BookClosed === false) {
  return (
    <Image
    source={require('./Images/close_book.png')}
    style={styles.closeBookStyle} />
      );
  }
  setTimeout(() => this.stateFunc, 1000);
}
stateFunc() {
  this.setState({ BookClosed: true }, () => setTimeout(() => this.openBook, 1000);
}
openBook() {
  if (this.state.Triggered === true && this.state.BookClosed === true) {
     return (
     <Image
     source={require('./Images/open-book.png')}
     style={styles.openBookStyle} />
   );
  }
}
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableWithoutFeedback
      onPress={() => { this.setState({ Triggered: true }); }} >
      {this.changingImages()}
      </TouchableWithoutFeedback>
      </View>
    );
  }
}

Answer 1

正常参考UR代码，代码将永远不会被调用因为我们事先将其返回

设置超时返回定时器的ID，该计时器将在给定时间后执行。您可以使用ClearTimeout来"取消"执行

尝试做这样的事情：

  state = {
    Triggered: false,
    BookClosed: false,
         }
  closeTimeoutHandler = null;
  changingImages() {
    if (this.state.Triggered === false) {
      return (
        <Image
          source={require('./Images/front_cover.png')}
          style={styles.frontCoverStyle} />
      );
    }
    if (this.state.Triggered === true && this.state.BookClosed === false) {
      clearTimeout(this.closeTimeoutHandler);
      this.closeTimeoutHandler = setTimeout(() => this.stateFunc(), 1000);
      return (
        <Image
          source={require('./Images/close_book.png')}
          style={styles.closeBookStyle} />
      );
    }
    if (this.state.Triggered === true && this.state.BookClosed === true) {
      return (
        <Image
          source={require('./Images/open-book.png')}
          style={styles.openBookStyle} />
      );
    }
  }
  stateFunc() {
    this.setState({ BookClosed: true });
  }
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <TouchableWithoutFeedback
          onPress={() => { this.setState({ Triggered: true }); }} >
          {this.changingImages()}
        </TouchableWithoutFeedback>
      </View>
    );
  }
}