React-native: Übergeben Sie ein Ereignis an ein anderes Objekt

Question

Dies ist meine erste Erfahrung mit JS/React/React Native. Ich verstehe die Mechanik dieses Rahmens noch nicht vollständig, sei also nett zu mir.

Was ich habe:

<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 ist eine benutzerdefinierte Klasse, die 'Start' wird, 'Pause' und 'Ende' Methoden. Ich möchte die Methoden beider Timer aufrufen, wenn TouchableHighlight gedrückt wird.

Insgesamt es würde wie folgt aussehen:

wenn erste TouchableHighlight gedrückt wird (startWork), Timer2.end und Timer1.start sollte aufgerufen werden, wenn Sekunde lang gedrückt wird (startBreak), Timer1.pause, Timer2.start sollte aufgerufen werden, für dritte (stopWork) wäre es Timer1.end, Timer2.end.

Aber wie soll ich auf diese Timer von onPress Methoden beziehen? Sollte ich beide Timer in einigen Klassen der Elternklasse behalten? Ich bin total festgefahren und habe keine Ahnung, wo ich anfangen soll (und was akzeptabel ist). Solch ein Problem ist nicht leicht zu finden (oder ich weiß nicht, wo ich hinschauen soll). Ich würde jede mögliche Hilfe schätzen (Lösung, auf Tutorium zeigend ...).

Answer 1

Wenn Sie die Timer-Komponenten in dieser Komponente machen Sie einen ref an jeden von ihnen, wie

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

Dann in den Touchable Callback-Funktionen zuweisen sollten Sie this.timer1.start()

Hinweis anrufen: Eine sauberere Ref-Einstellung würde eine andere Funktion haben, so dass Sie nicht ständig in der Render-Funktion binden:

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

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