React Native: Kann keine Methode von 'routeMapper' verwendet werden?

Question

Ich verwende reagieren nativer Schublade https://github.com/root-two/react-native-drawer

Ich versuche, die Methode openDrawer(), indem in Variable in NavigationBarRouteMapper zu nennen. Ich habe versucht, in NavigationBarRouteMapper zu loggen, und es protokolliert die korrekt übergebene Variable. Aber wenn es im Inneren des NavigationBarRouteMapper verwendet, durch die linke Navigationstaste von ‚Open Schublade‘ klicken, tut es nichts:

class drawerPractice extends Component { 
... 

    openDrawer(){ 
    this._drawer.open() 
    } 

    render() { 
    return (
    <Drawer 
    content={<DrawerPanel/>} 
    openDrawerOffset={100} 
    ref={(ref) => this._drawer = ref} 
    type='static' 
    tweenHandler={Drawer.tweenPresets.parallax} 
    > 
     <Navigator 
      configureScene={this.configureScene} 
      initialRoute={{name: 'Start', component: Start}} 
      renderScene={this.renderScene} 
      style={styles.container} 
      navigationBar={ 
      <Navigator.NavigationBar 
       style={styles.navBar} 
       routeMapper={NavigationBarRouteMapper(this.openDrawer)} 
      /> 
      } 
     /> 
    </Drawer> 
    ); 
    } 
} 

var NavigationBarRouteMapper = openDrawer => ({ 
    LeftButton(route, navigator, index, navState){ 
     return(
      <TouchableHighlight onPress={()=>{openDrawer}}> 
       <Text>Open Menu</Text> 
      </TouchableHighlight> 
    ) 
    } 
    },... 

Warum kann das Problem sein?

Answer 1

Auf Ihrer constructor() Methode hinzufügen: this.openDrawer = this.openDrawer.bind(this);

Sie this auf dem falschen Umfang wahrscheinlich verwenden.

Answer 2

Beim Arbeiten mit React-Komponenten und der neuen Syntax ES6 extends gibt es eine häufige Verwechslung. Wenn Sie React.createClass verwenden, bindet es this an alle Ihre Funktionen, aber wenn Sie den ES6-Ansatz von extends React.Component verwenden, müssen Sie Ihre Funktionen manuell binden.

Sie können es entweder inline mit

<TouchableHighlight onPress={()=>{this.openDrawer.bind(this)}}> 

Alternativ können Sie zu Ihrem Konstruktor hinzufügen, nach super():

this.openDrawer = this.openDrawer.bind(this); 

Ich persönlich mag diesen Ansatz als ich diesen Code ein bisschen einfacher finden lesen.

Weitere Informationen zur ES6-Methode finden Sie unter this link.