javascript - this.setTimeout() 不是 React native 的函数吗？

Question

我正在尝试在 React Native 中创建一个简单的秒表计时器，并且我创建了一个名为 Chrono 的新组件来处理时钟数据(小时、分钟等)

我在以下代码中按下按钮触发时钟计数:

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, AppRegistry, StyleSheet, Alert } from 'react-native';
import Chrono from './app/Chrono.js';

export default class morphX extends Component {
  constructor(props) {
    super(props)
    this.state = {
      randomCounter: 0
    }
    this.chrono = null
  }

  onItemPressed = () => {
    this.chrono.startTimer()
  }

  updateRandomCounter = () => {
    this.setState({
      randomCounter: this.state.randomCounter + 1
    })
  }

  clearCounter = () => {
    this.setState({ 
      randomCounter: 0
    })
  }

  render() {
    return (
      <View style={styles.mainWrapper}>
        <View style={styles.upperWrapper}>
          <Chrono ref = { r => this.chrono = r} />
        </View>
        <View style={styles.bottomWrapper}>
          <View style={styles.initialButtons}>
            <TouchableOpacity
              style={styles.touchableButton}
              text="Let's Start!"
              onPress={() => this.onItemPressed()}>
              <Text style={styles.buttonTexts}>
                Count Up!
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.touchableButton}
              title="RESET!"
              onPress={() => this.clearCounter()}>
              <Text style={styles.buttonTexts}>
                Reset!
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }
}
AppRegistry.registerComponent('morphX', () => morphX);

startTimer 是在 Chrono.js 组件中实现的:

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, AppRegistry, StyleSheet, Alert } from 'react-native';

class Chrono extends Component {
    constructor(props) {
        super(props)
        this.state = {
            hours: 0,
            minutes: 0,
            seconds: 0
        }
    }

    // Chronometer start function
    startTimer = () => {
        console.log(this)
        this.setTimeout(function() {
            console.log('HeY!')
            this.setState({
                seconds: 1
            })  
        }, 1000);
    }

    // Chronometer pause function 
    pauseTimer = () => {

    }

    // Chronometer reset function 
    resetTimer = () => {

    }

    render() {
        return (
            <View style={styles.clockWrapper}>
                <Text style={styles.hourWrapper}>
                    {this.state.hours}
                </Text>
                <Text style={styles.colonWrapper}>
                    :
                </Text>
                <Text style={styles.minuteWrapper}>
                    {this.state.minutes}
                </Text>
                <Text style={styles.colonWrapper}>
                    :
                </Text>
                <Text style={styles.secondsWrapper}>
                    {this.state.seconds}
                </Text>
            </View>
        )
    }
}

export default Chrono

我遇到了错误

this.setTimeout is not a function

出于某种原因，在我调用 setTimeout 的那一行。为什么？

Answer 1

TimerMixin 不包含在默认的 react-native 中。您必须自己安装它，然后才能使用 this.setTimeout。检查here获取详细信息。

This library does not ship with React Native - in order to use it on your project, you will need to install it with
npm i react-timer-mixin --save
from your project directory.

---

Keep in mind that if you use ES6 classes for your React components there is no built-in API for mixins. To use TimerMixin with ES6 classes, we recommend react-mixin.