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

问题

Following is the UPDATED code -- I am trying to implement react-native-drawer from https://github.com/root-two/react-native-drawer and the variable I passed into NavigationBarRouteMapper logs openDrawer() function properly, yet when the left nav button is clicked it does nothing:

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

What may be stopping the drawer from opening? Seems like everything has been implemented properly.

回答1:

Your problem is with the scope of the testingString variable. When you console.log(this.testingString), this points to the object returned by the NavigationBarRouteMapper function. You haven't set a testingString variable on this object, so it will return undefined.

To get the variable you passed into the function in this way, simply use testingString, and not this.testingString.

Edit regarding the openDrawer function

You're passing a function that returns your openDrawer function instead of calling it. You'll want to pass onPress={openDrawer} or onPress={() => openDrawer()} as your prop.

来源：https://stackoverflow.com/questions/38489478/how-can-i-pass-refs-into-variable-of-navigationbar-routemapper-react-native

标签

javascript

ios

react-native

react-jsx