Question

我尝试在我的应用中实现react-compound-timer组件，但遇到了问题同时在我自己的函数中调用start，pause和resume。我是新来的，在当地人的反应。我想在自己的函数onPress={start}中调用此Start。代码片段在这里。

import React, { Component } from "react";
import { View, Text, Image, StyleSheet } from "react-native";
import Timer from "react-compound-timer";

class TestTimer extends Component {

  constructor(props) {
    super(props);
    this.state = {};
  }


  Start() {
    // call start function here

  }

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Timer initialTime={55000} startImmediately={false}>
          {({ start, resume, pause, stop, reset, timerState }) => (
            <React.Fragment>
              <Text>
                <Timer.Days /> days
                <Timer.Hours /> hours
                <Timer.Minutes /> minutes
                <Timer.Seconds /> seconds
                <Timer.Milliseconds /> milliseconds
              </Text>
              <Text>{timerState}</Text>
              <View style={{ flexDirection: "row" }}>
                <Button onPress={start}>    // this function i want to call                           
                  <Text>{"start"}</Text>    // in my own function
                </Button>
                <Button onPress={pause}>
                  <Text>{"pause"}</Text>
                </Button>
                <Button onPress={resume}>
                  <Text>{"resume"}</Text>
                </Button>
                <Button onPress={stop}>
                  <Text>{"stop"}</Text>
                </Button>
                <Button onPress={reset}>
                  <Text>{"reset"}</Text>
                </Button>
              </View>
            </React.Fragment>
          )}
        </Timer>
        <Button onPress={() => this.Start()}>
          <Text>{"custom start"}</Text>
        </Button>
      </View>
    );
  }
}

Answer 1

如果您使用的是React Hook，则可以使用 useRef（）在自己的函数上调用它们

示例：

import React, { useRef, useEffect, useState } from 'react'
import Timer from "react-compound-timer";


const TestTimer = () => {

  const startTimeFunc = useRef()

  function handleStartTime() {
    startTimeFunc.current.start()
  }

return (<Timer
        initialTime={1500000}
        direction="backward"
        startImmediately={false}
        onStart={() => console.log("call back on start")}
      >
        // assign control to startTimeFunc
        {(control) => {
          startTimeFunc.current = control

          return (
            <React.Fragment>
                <div>
                  {' Study time: '}
                  <Timer.Minutes /> minutes {' '}
                  <Timer.Seconds /> seconds
                </div>
              <br />
              <div>
                <button className="studyButton" onClick={handleStartTime}>Start studying</button> {' '}
              </div>
            </React.Fragment>
          )
        }}
        </Timer>
      )}

Answer 2

您可以使您的Start函数接收start函数并返回一个新函数，该函数将称为onPress按钮回调：

Start = (start) => () => {
   console.log('My own function');
   start()
}

然后：

<Button onPress={this.Start(start)}>                        
  <Text>{"start"}</Text>    
</Button>

如何在函数中调用react-compound-timer暂停和恢复？

2 个答案: