javascript - React-native:将事件传递给其他对象

Question

这是我第一次接触 JS/React/React Native。我还没有完全掌握这个框架的机制，所以请善待我。

我有什么:

<View style={styles.container}>
    <View style={styles.timerContainer}>
        <View style={styles.timerBar}>
            <Image style={styles.icon} source={require('../../img/time50.png')}/>
            {Timer}  //First
        </View>
        <View style={styles.timerBar}>
            <Image style={styles.icon} source={require('../../img/break50.png')}/>
            {Timer}  //Second
        </View>
    </View>
    <View style={styles.buttonContainer}>            
        <TouchableHighlight onPress={this.startWork}>
            <Image style={styles.imageButton} source={require('../../img/start.png')}/>
        </TouchableHighlight>
        <TouchableHighlight onPress={this.startBreak}>
            <Image style={styles.imageButton} source={require('../../img/break.png')}/>
        </TouchableHighlight>
        <TouchableHighlight onPress={this.stopWork}>
            <Image style={styles.imageButton} source={require('../../img/end.png')}/>
        </TouchableHighlight>
    </View>
</View>

Timer 是一个自定义类，它有“开始”、“暂停”和“结束”方法。我想在按下 TouchableHighlight 时调用两个计时器的方法。

总的来说，它看起来像这样:

当按下第一个 TouchableHighlight (startWork) 时，应调用 Timer2.end 和 Timer1.start，当按下第二个 (startBreak) 时，应调用 Timer1.pause、Timer2.start，按下第三个 (stopWork) 时，将调用 Timer1.pause 和 Timer2.start定时器1.结束，定时器2.结束。

但是我应该如何从 onPress 方法引用这些计时器呢？我应该将两个计时器保留在父类的某些变量中吗？我完全陷入困境，不知道从哪里开始(以及什么是可以接受的)。这样的问题不容易在谷歌上搜索(或者我不知道在哪里看)。我将不胜感激任何帮助(解决方案，指向教程......)。

Answer 1

当您在此组件中渲染计时器组件时，您应该为每个组件分配一个引用，例如

<Timer ref={r => this.timer1 = r}/>

然后在Touchable回调函数中你可以调用this.timer1.start()

注意:更清晰的引用设置实际上是有另一个函数，因此您不会不断地绑定(bind)渲染函数:

setTimerOne = (r) => {
  this.timer1 = r;  
}

render() {
  <Timer ref={this.setTimerOne}/>
}