Question

点击导航栏（Android）中的左键，我正在尝试打开抽屉菜单。出于某种原因，在调用openDrawer时无法识别引用

我收到错误： “undefined不是一个对象（评估'_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

最终解决了。

我在主要课程中添加了。

openDrawer(){
drawer.openDrawer();
}

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

然后在routeMapper中我简单地调用openDrawer();并且它有效。

React Native - 将refs传递给NavigationBar routeMapper

1 个答案: