reagieren-native-Navigation Navigator ist nicht definiert benutzerdefinierte Schaltfläche

Question

I india Navigation durch Wix Reagieren bin mit (https://github.com/wix/react-native-navigation)

ich Redux mit meiner app bin auch mit.

Ich versuche eine benutzerdefinierte Schaltfläche zu meiner oberen Leiste hinzuzufügen, damit ich das Öffnen und Schließen der Schublade auslösen kann.

Ich füge eine Schublade auf die Registerkarte wie folgt:

Navigation.startTabBasedApp({ 
    tabs: [ 
     { 
     label: 'Home', 
     screen: 'swiftyApp.Home', 
     icon: icons.homeOutline, 
     selectedIcon: icons.home, 
     title: 'Home', 
     navigatorStyle, 
     navigatorButtons: { 
      leftButtons: [ 
      { 
       id: 'custom-button', 
       component: 'CustomButton', 
       passProps: { 
       text: 'Hi!' 
       } 
      } 
      ] 
     } 
     } 
    ], 
    drawer: { 
     left: { 
     screen: 'swiftyApp.Drawer', 
     passProps: {} 
     }, 
     style: { 
     drawerShadow: false, 
     contentOverlayColor: 'rgba(0,0,0,0.25)', 
     leftDrawerWidth: 75, 
     rightDrawerWidth: 25 
     }, 
     type: 'MMDrawer', 
     animationType: 'slide', 

     disableOpenGesture: false 
    }, 
    appStyle: { 
     orientation: 'portrait', 
     hideBackButtonTitle: true 
    } 
    }); 
}); 

My Custom Button-Komponente sieht aus wie

const CustomButton = props => { 
    console.log(props); 
    const { text, navigator } = props; 
    return (
    <TouchableOpacity 
     style={[styles.button, { backgroundColor: 'tomato' }]} 
     onPress={() => 
     navigator.toggleDrawer({ 
      side: 'left', 
      animated: true 
     }) 
     } 
    > 
     <View style={styles.button}> 
     <Text style={{ color: 'white' }}>{text}</Text> 
     </View> 
    </TouchableOpacity> 
); 
}; 

Die Schaltfläche zeigt und die Stile angewendet werden, wie erwartet. Allerdings, wenn Sie die Taste eine Ausnahme klicken geworfen wird, dass die onPress ausfällt als navigator.toggleDrawer nicht definiert ist, bei der Kontrolle der Ausgabe der Navigator Requisiten übergeben wird, kann ich im Protokoll sehen:

2017-11-25 13:33:48.703 [info][tid:com.facebook.react.JavaScript] '************', { testID: 'CustomButton', 
    navigator: undefined, 
    passPropsKey: 'customButtonComponent3', 
    rootTag: 21, 
    text: 'Hi!' } 

Navigator ist in der Tat nicht definiert . Ich kann nicht für das Leben meines Wortes warum.

Wie übergebe ich Navigator in etwas wie eine benutzerdefinierte Schaltfläche für die Navbar, so dass ich eine Schublade öffnen oder ein Modal auslösen kann?

Answer 1

Benutzerdefinierte Schaltflächen sind keinem Navigator zugeordnet. Sie müssen die Schaltfläche im Konstruktor der Bildschirme festlegen und den Navigator in Requisiten übergeben.

constructor(props) { 
    super(props); 
    this.props.navigator.setButtons(this.navigatorButtons(this.props.navigator)); 
    } 

    navigatorButtons = (navigator) => { 
    return { 
     leftButtons: [ 
     { 
      id: 'custom-button', 
      component: 'CustomButton', 
      passProps: { 
      text: 'Hi!', 
      navigator 
      } 
     } 
     ] 
    }; 
    } 

Vergessen Sie nicht, dass die benutzerdefinierte linke Schaltfläche auf Android nicht unterstützt wird.