React Native：不能使用 'routeMapper' 中的方法吗？

Question

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

的 React Native 抽屉

我试图通过将变量传入 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' 中的方法吗？

React Native: can't a method be used from 'routeMapper'?

javascript

react-jsx

react-native