Question

我正在尝试使页面上的组件“闪烁”。我当时正在考虑在我的componentWillMount方法中设置一个可见的：true状态，然后在componentDidUpdate中将超时设置为1秒，以将状态设置为与先前状态相反。在我看来，组件的生命周期如下：

将状态设置为可见（true）（componentWillMount仅运行一次，并且不会触发重新渲染）进入componentdidUpdate 等待1秒隐藏组件（将setstate设置为visible false）进入componentDidUpdate 等待1秒显示组件（将setstate设置为visible true）

但是我的组件正在闪烁，但是隐藏和显示的间隔不是固定的，它们会改变并且似乎不遵循1s逻辑

这是我的组件代码：

ResumeChronoButton类扩展了组件{

  componentWillMount(){

    console.log('in componentWillMount')
    this.setState({visible: true})
  }
  componentDidUpdate(){
    console.log('in componentDidUpdate')
    setTimeout(() =>this.setState({visible: !this.state.visible}), 1000)
  }

  // componentWillUnmount(){
  //   clearInterval(this.interval)
  // }
  render(){
    const { textStyle } = styles;
    if (this.state.visible){
      return (
              <TouchableOpacity onPress={this.props.onPress}>
                <Pause style={{height: 50, width: 50}}/>
              </TouchableOpacity>
      );
    }
    else {
      return (
        <View style={{height: 50, width: 50}}>
        </View>
      )
    }
  }
};

如何使我的组件按固定的时间间隔闪烁。

Answer 1

最有可能是因为您正在使用状态和超时。状态是异步设置的，因此，根据所使用的资源数量，更改值可能会花费不同的时间。

要获得想要的效果，我建议您使用React Native的Animation框架。检查文档。

Answer 2

以下对我有用的

componentDidMount = () => {
  this.interval = setInterval(() => {
    this.setState((state, props) => {
      return {
        visible: !state.visible,
      };
    });
  }, 1000);
};

componentWillUnmount = () => {
  clearInterval(this.interval);
};

，然后您的渲染器只需检查this.state.visible即可确定它是否需要显示。

或者，您可以将setState更改为

this.setState({visible: !this.state.visible})

Answer 3

只需使用

{{#if ('emps.marital_status  "married"') }}
    married
{{else}}
    unmarried
{{/if }}

使本机组件每隔一定时间闪烁一次

3 个答案: