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不是一个函数

在我因某种原因调用setTimeout的行上。 为什么？

Answer 1

TimerMixin不包含在默认的react-native中。 你必须自己安装它然后你可以使用this.setTimeout 。 点击此处查看详细信息。

此库未随React Native一起提供 - 为了在您的项目中使用它，您需要安装它
npm i react-timer-mixin --save
从您的项目目录。

---

请记住，如果您为React组件使用ES6类， 则没有内置的mixin API 。 要将TimerMixin与ES6类一起使用，我们建议使用react-mixin 。

Answer 2

我使用setTimeout()而不包括react-timer-mixin ，它在我的应用程序中工作正常。

componentDidMount() {

    const a = setTimeout(() => {

      // do some stuff here

    }, 100);

}

Answer 3

setTimeout（）是全局的，实际上是浏览器中的window.setTimeout（），在React Native窗口中暗示了使用它的全局函数。 所以this.setTimeout（）实际上应该只是setTimeout（）。

另外在React Native中看到setTimeout， setTimeout（）中的回调函数改变了“this”的范围