Question

我试图通过简单地每隔500毫秒切换图像来为React native中的图标添加动画效果。我的代码如下所示：

export default class FlashingIcon extends Component {
  constructor(props) {
    super(props);
    this.state = {
      on: true,
    };

    setInterval(() => {
       this.setState(previousState => {
         return {
           on: !previousState.on,
        };
      });
    }, 500);
  }

  render() {
    let sprite = this.state.on
      ? require('../onIcon.png')
      : require('../offIcon.png');

    return (
      <Image
        source={sprite}
        style={{width:16, height:20}}
      />
    );
  }
}

代码基本上是通过以下方式复制粘贴的：

如果我只是将require复制到<Image>，则会显示每个图片。我还可以验证，如果我改为呈现<Text>元素输出this.state.on，它会交替显示正确的值。

我不能为我的生活弄清楚我做错了什么。

Answer 1

将key添加到Image一旦状态发生变化，它将有助于重新渲染图像。

<Image
    key={this.state.on}
    source={sprite}
    style={{width:16, height:20}}
  />

如何在react本机组件中交替使用两个映像

1 个答案: