2016-04-19 8 views
0

Ich versuche, das Menü der Schublade zu öffnen, wenn Sie auf die linke Schaltfläche in der Navigationsleiste (Android) klicken. Aus irgendeinem Grund ist es nicht Refs erkennen, wenn openDrawerReact Native - Übergabe Refs in NavigationBar routeMapper

Aufruf erhalte ich die Fehlermeldung: „undefiniert ist kein Objekt (‚_this3.refs.drawer‘Auswertung)“

ziemlich frustrierend:/

Wie kann ich die Schublade von routeMapper öffnen?

class navigator extends Component { 

constructor(props){ 
    super(props); 
... 
} 

renderScene(route, nav){ 
... 
} 

static routeMap = drawer => ({ 
    LeftButton(route, navigator, index, navState){ 
    return (
     <TouchableHighlight onPress={() => { 
     this.drawer.openDrawer(); 
     }}> 
     <Text>MENU</Text> 
     </TouchableHighlight> 
    ); 
    }, 
    RightButton(route, navigator, index, navState){ 
    return null; 
    }, 
    Title(route, navigator, index, navState){ 
    return (
    <View style={{flex:1}}> 
     <Text style={styles.title}>{route.name}</Text> 
    </View> 
    ) 
    }, 
}) 

render(){ 

var navigationView = (
     <View style={styles.page}> 
     <ToolbarAndroid style={styles.toolbar} 
     title="Menu" 
     titleColor="#FFF" /> 
     <View> 
     <TouchableHighlight style={styles.button} onPress={() => { 
      this.nav.push({ 
      name:'Page1', 
      }); 
      this.drawer.closeDrawer(); 
     }}> 
      <View> 
       <Text style={styles.instructions}> 
       Page 1 
       </Text> 
      </View> 
     </TouchableHighlight> 
     <TouchableHighlight style={styles.button} onPress={() => { 
      this.nav.push({ 
      name: 'Page2', 
      }); 
      this.drawer.closeDrawer(); 
     }}> 
      <View> 
       <Text style={styles.instructions}> 
       Page 2 
       </Text> 
      </View> 
     </TouchableHighlight> 
     </View> 
     </View> 
); 

    return (
      <DrawerLayoutAndroid 
      drawerWidth={300} 
      drawerPosition={DrawerLayoutAndroid.positions.Left} 
      ref={(ref) => this.drawer = ref } 
      renderNavigationView={() => navigationView}> 
      <Navigator 
       initialRoute={{name: 'Page1', index: 0}} 
       ref = {((nav)=> { this.nav = nav; })} 
       renderScene={this.renderScene.bind(this)} 
       configureScene={(route, routeStack) => 
       Navigator.SceneConfigs.FloatFromBottomAndroid} 
       navigationBar={ 
      <Navigator.NavigationBar routeMapper={navigator.routeMap(this.drawer)} 
      style={styles.toolbar} /> 
      } 
       /> 
      </DrawerLayoutAndroid> 
     ); 
    } 
} 

Antwort

0

Schließlich gelöst.

Ich habe in der Hauptklasse hinzugefügt.

openDrawer(){ 
drawer.openDrawer(); 
} 

Dann ging ich navigator.routeMap(this.openDrawer) statt this.drawer zum routeMapper.

Dann innerhalb der RouteMapper rief ich einfach openDrawer(); und es funktionierte.

Verwandte Themen