如何将 refs 传递到 NavigationBar routeMapper（React Native）的变量中？

Question

以下是更新后的代码——我正在尝试从https://github.com/root-two/react-native-drawer 实现 react-native-drawer，并且我传递给 NavigationBarRouteMapper 的变量正确记录了 openDrawer() 函数，但是当单击左侧导航按钮时它什么也不做：

class practice 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

您的问题在于 testingString 变量的范围。当你console.log(this.testingString)时，this指向NavigationBarRouteMapper函数返回的对象。你没有在这个对象上设置testingString 变量，所以它会返回 undefined。

要以这种方式获取您传递给函数的变量，只需使用testingString，而不是this.testingString。

关于 openDrawer 功能的编辑

您正在传递一个函数，该函数返回您的openDrawer 函数，而不是调用它。您需要通过 onPress={openDrawer} 或 onPress={() => openDrawer()} 作为您的道具。