React Native - 将 refs 传递给 NavigationBar routeMapper

Question

我试图在单击导航栏中的左侧按钮时打开抽屉式菜单 (Android)。出于某种原因，它在调用 openDrawer

时无法识别 refs

我收到错误： "undefined is not an object (evaluating '_this3.refs.drawer')"

非常令人沮丧：/

如何从 routeMapper 打开抽屉？

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

Answer 1

终于解决了。

我在主体中添加了class。

openDrawer(){
drawer.openDrawer();
}

然后我将 navigator.routeMap(this.openDrawer) 而不是 this.drawer 传递给了 routeMapper。

然后在 routeMapper 中我简单地调用了 openDrawer(); 并且它起作用了。

React Native - 将 refs 传递给 NavigationBar routeMapper

React Native - passing refs into NavigationBar routeMapper

android

navigationbar

react-native