如何将 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 函数编辑的对象 return。您尚未在此对象上设置 testingString 变量，因此它将 return 未定义。

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

关于openDrawer功能的编辑

您正在传递 returns 您的 openDrawer 函数而不是调用它。您需要传递 onPress={openDrawer} 或 onPress={() => openDrawer()} 作为您的道具。

如何将 refs 传递给 NavigationBar routeMapper (React Native) 的变量？

How can I pass refs into variable of NavigationBar routeMapper (React Native)?

javascript

ios

react-jsx

react-native