React Native Navigator benutzerdefinierte Schaltfläche onPress

Question

Ich benutze react-native-Navigation als meine Navigation in einer App und ich habe die links/rechts-Taste Option (statische NavigatorButtons) verwendet, um einige Schaltflächen auf jeder Seite der Navbar, die ich kann mit onNavigatorEvent (event) verwenden und überprüfen, welche mit Event.id gedrückt wurde

Die funktionieren gut, aber jetzt habe ich einige benutzerdefinierte Schaltflächen in der Mitte mit einer Komponente (Custom Bar) hinzugefügt. Das Problem ist, ich habe keine Ahnung, wie man onPress dieser Tasten erkennt. Das onNavigatorEvent (Ereignis) scheint sie nicht zu erkennen und weiß nicht, wie dies zu tun ist.

Grundsätzlich möchte ich listA anzuzeigen, wenn Leftbutton gedrückt wird oder wenn ListeB rightButton gedrückt wird aber nicht wissen, wie man die onPress Ereignis hören

Individuelle Bar

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> 
    ); 
    } 
} 

Hauptbildschirm

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

Wenn eine Schaltfläche gedrückt wird, senden Sie eine DeepLink und behandeln Sie den Link auf dem Bildschirm. Sie können DeepLink statisch zum Beispiel versenden:

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