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>

计时器是一个自定义类，它将启动＆＃39;暂停＆＃39;并且＆＃39;结束＆＃39;方法。我想在按下TouchableHighlight时调用两个定时器的方法。

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

当按下第一个TouchableHighlight（startWork）时，应该调用Timer2.end和Timer1.start，当按下秒（startBreak）时，应该调用Timer1.pause，Timer2.start，对于第三个（stopWork），它将被调用Timer1.end，Timer2.end。

但我怎么能从onPress方法中引用这些计时器呢？我应该将两个计时器都放在一些父类中吗？我完全陷入困境，不知道从哪里开始（以及可以接受的）。这样的问题不容易上瘾（或者我不知道在哪里看）。我将不胜感激任何帮助（解决方案，指向教程......）。

Answer 1

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

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

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

注意：清洁器参考设置实际上是另一个函数，所以你不会在渲染函数中不断绑定：

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

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

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

1 个答案: