Réagissez le bouton personnalisé de Native Navigator onPress

Question

J'utilise reac-native-navigation comme navigation dans une application et j'ai utilisé l'option de bouton gauche/droite (static navigatorButtons) pour implémenter des boutons de chaque côté de la barre de navigation. peut utiliser avec onNavigatorEvent (event) et vérifier lequel a été pressé avec event.id

Cela fonctionne bien, mais maintenant j'ai ajouté quelques boutons personnalisés au milieu en utilisant un composant (barre personnalisée). Le problème est que je n'ai aucune idée comment détecter onPress de ces boutons. L'onNavigatorEvent (event) ne semble pas les détecter et ne sait pas comment procéder.

Fondamentalement, je veux afficher listeA si LeftButton est pressée ou listeB si RightButton est pressé, mais ne savent pas comment écouter l'événement onPress

Bar personnalisé

import stuff needed 

export default class TopBar extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
     leftPressed: true, 
     rightPressed: false 
     }; 

     this.leftButton = this.leftButton.bind(this); 
     this.rightButton = this.rightButton.bind(this); 
    } 

    leftButton(){ 
     this.setState({ 
     leftPressed: true, 
     rightPressed: false 
     }) 
    } 

    rightButton(){ 
     this.setState({ 
     leftPressed: false, 
     rightPressed: true 
     }) 
    } 

    render() { 
     return (
     <View style={Styles.container}> 
      <View style = {[Styles.wrapper, {borderTopLeftRadius: 20, borderBottomLeftRadius: 20}]}> 
      <TouchableOpacity style={[Styles.button, {alignSelf: 'flex-start'}]} onPress={ this.leftButton }> 
       <Text style={[Styles.text, this.state.leftPressed && Styles.textSelected]}>All Tasks</Text> 
      </TouchableOpacity> 
      </View> 
      <View style = {[Styles.wrapper, {borderTopRightRadius: 20, borderBottomRightRadius: 20}]}> 
      <TouchableOpacity style={[Styles.button, {alignSelf: 'flex-start'}]} onPress={ this.rightButton }> 
       <Text style={[Styles.text, this.state.rightPressed && Styles.textSelected]}>My Tasks</Text> 
      </TouchableOpacity> 
      </View> 
     </View> 
    ); 
    } 
} 

écran principal

import other stuff needed 
import TopBar from '../_shared/components/TopBar'; 

Navigation.registerComponent('task.TopBar',() => TopBar); 
class TaskListComponent extends BaseView { 
    static navigatorButtons = { 
     rightButtons: [ 
      { 
      id: 'Filter', 
      icon: require('../_shared/components/Images/tune.png'), 
      }, 
      { 
      id: 'Search', 
      icon: require('../_shared/components/Images/search.png'), 
      } 
     ], 
     leftButtons: [ 
      { 
      id: 'Create', 
      icon: require('../_shared/components/Images/plus.png'), 
      }, 
     ] 
    } 

    constructor(props) { 
     super(props); 
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this)); 
    this.state = { 
     tasklist: props.TaskList || null 
    }; 

    onNavigatorEvent(event) { 
     if (event.type == 'NavBarButtonPress') { 
      if (event.id == 'Create') { 
       this.createTask() 
      } 
      if (event.id == 'Search') { 
       this.searchTask() 
      } 
      if (event.id == 'Filter') { 
       this.filterTask() 
      } 
     } 
    } 

//code for the left/right buttons goes here 

    componentDidMount() { 
     this.props.navigator.setStyle({ 
      navBarCustomView: 'task.TopBar', 
      navBarComponentAlignment: 'center', 
     }); 
    } 

    render() { 
     if (TopBar leftPressed true) { //I know this is wrong just explaining the logic 
      return (
       <View> 
        //some stuff 
       </View> 
      ); 
     } else { 
      return (
       <View> 
        //other stuff 
       </View> 
      ) 
     } 
    } 
} 

Answer 1

Lorsqu'un bouton est enfoncé, envoyez un DeepLink et gérez le lien à l'écran. Vous pouvez envoyer DeepLink statiquement par exemple:

Navigation.handleDeepLink({link: 'button1Pressed'});