Question

我正在使用https://github.com/root-two/react-native-drawer

的原生抽屉

我试图通过将变量传入NavigationBarRouteMapper来调用方法openDrawer（）。我尝试在NavigationBarRouteMapper中记录，并记录正确传递的变量。但是当它在NavigationBarRouteMapper中使用时，通过单击“打开抽屉”的左侧导航按钮，它不会执行任何操作：

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>
      )
    }
  },...

为什么会出现问题？

Answer 1

在constructor()方法上添加：this.openDrawer = this.openDrawer.bind(this);

您可能在错误的范围内使用this。

Answer 2

使用React组件和新的ES6 extends语法时会出现常见的混淆。如果您使用React.createClass，它会将this绑定到您的所有函数，但在使用extends React.Component的ES6方法时，您必须手动绑定您的函数。

您可以使用

进行内联

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

或者，您可以在super()：

之后添加到构造函数中

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

我个人喜欢这种方法，因为我觉得这段代码更容易阅读。

有关ES6方式的更多信息，请查看this link。

React Native：不能从'routeMapper'中使用一个方法？

2 个答案: