如何在反应导航中设置计时器？答案

【问题标题】：How to set timer in react-navigation?如何在反应导航中设置计时器？
【发布时间】：2019-11-22 09:09:31
【问题描述】：

我尝试使用计时器导航 react-native-navigation。因此，如果计时器的值为 '5'，则调用导航到 'Home'。

我使用三元运算来调用导航。

import React from 'react';
import {
  View,
  Text,
  Button
} from 'react-native';
import {styles} from './AppStyle'
import {createStackNavigator, createAppContainer} from 'react-navigation'
import HomeScreen from './Pages/Home'

class Timer extends React.Component{
  constructor(props){
    super(props)
      this.state = {
        time : props.count
    }
  }

  componentDidMount(){
    this.addInterval = setInterval( () => this.increase(), 1000)
  }

  componentWillUnmount(){
    clearInterval(this.addInterval)
  }

  increase(){
    this.setState((_state, _props) => ({
      time: parseInt(this.state.time) + 1
    }))
  }

  render(){
    return(
      <Text> {this.state.time} </Text>
    );
  }

}
class StartScreen extends React.Component {
  render(){
    return (
      <View style={styles.container}>
        <View style={styles.navbar}>
          <Timer count='0'/>
          {this.props.count == '5' ? ()=>this.props.navigation.navigate('Home') : ''}
        </View>
      </View>
    );
  };
}

const HomeNavigator = createStackNavigator(
  {
    Home: {
      screen: HomeScreen
    }
  }
)

const StartNavigator = createStackNavigator(
  {
    Start: {
      screen: StartScreen
    },
    Main: {
      screen: HomeNavigator
    }    
  },
  {
    mode: 'modal',
    headerMode: 'none'
  },
  {
    initialRouteName: 'Start'
  }
)

const AppContainer = createAppContainer(StartNavigator);

export default class App extends React.Component {
  render() {
    return <AppContainer/>
  }
}

我希望当计数为“5”时屏幕将导航到“主页”，但我遇到了这个问题“不变违规：不变违规：必须在组件内呈现文本字符串”

【问题讨论】：

'count'值输出正确吗？
这一行 => {this.props.count == '5' ?()=>this.props.navigation.navigate('Home') : ''} 不应在渲染中调用。您必须重新考虑该逻辑并在 setInterval 回调中执行它。我认为这是问题

标签： react-native react-navigation react-native-navigation

【解决方案1】：

为您的Timer 组件创建一个onIncrease 属性，而不是直接在render 中进行函数调用。

class Timer extends React.Component {
  /* component functions */

  increase = () => {
    const { time } = this.state
    const { onIncrease } = this.props
    const newTime = time + 1
    onIncrease(newTime)
    this.setState({ time: newTime })
  }

  /* render function */
}

class StartScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.navbar}>
          <Timer
            count={0}
            onIncrease={count => {
              if (count === 5) {
                this.props.navigation.navigate('Home')
              }
            }}
          />
        </View>
      </View>
    )
  }
}

【讨论】：

【解决方案2】：

您也可以使用setTimeout，而不是这样做：

{this.props.count == '5' ? ()=>this.props.navigation.navigate('Home') : ''}

你可以的

{ setTimeout(()=>{ this.props.navigation.navigate("Home") }, 3000);}

【讨论】：