如何将导航器引用传递给React Native <Drawer/> ？

Question

Using react-native-drawer ( https://github.com/root-two/react-native-drawer ) in my index.ios.js, I have the following set up and trying to pass 'navigator' reference into content's < DrawerPanel /> of < Drawer />. I console.log(this.props.navigator) in < DrawerPanel /> but a wrong navigator reference is passed in, when I am attempting to do similar to this.props.navigator.replace() inside < DrawerPanel />

How can I pass in the right navigator constructor like that of being passed into renderScene and configureScene? :

class practice extends Component {
    ...
    renderScene(route, navigator){
        ...
    }

    configureScene(route, routeStack){
        ...
    }

    render() {
        return (
          <Drawer
            content={<DrawerPanel navigator={navigator}/>}
            ...
          >
            <Navigator
              configureScene={this.configureScene}
              initialRoute={{name: 'Login', component: Login}}
              renderScene={this.renderScene}
              style={styles.container}
              navigationBar={
                <Navigator.NavigationBar
                  style={styles.navBar}
                  routeMapper={NavigationBarRouteMapper(this.openDrawer)}
                />
              }
            />
         </Drawer>
    );
  }
}

Thank you in advance!

UPDATE 3****

In my <DrawelPanel/>

import HomePage from './HomePage'

render(){

var pr = this.props
var navigator = pr.getNav()

return (
    <View style={{flex:1, padding: 30, backgroundColor: 'black'}}>
        <MadeButton 
            componentName={HomePage}
            navigator={navigator}
            pageName='HomePage'
            style={{fontSize:15, fontWeight:'bold', color:'white'}}
        />
    </View>
)

Then in my <MadeButton/>

  static propTypes = {
    componentName: React.PropTypes.any,
    navigator: React.PropTypes.any,
    pageName: React.PropTypes.string,
    style: React.PropTypes.object
  }

  _navigate(type='Normal'){
    this.props.navigator.replace({
      component: this.props.componentName,
      type: type,
      name: this.props.pageName
    })
  }

  render(){
    var pr = this.props;
    var st = this.state;
    var styles = pr.style;

    return(
      <TouchableHighlight onPress={() => this._navigate()}>
        <Text style={styles}>{pr.pageName}</Text>
      </TouchableHighlight>
    )
  }

Answer 1

This is how it should be done. You save the navigator reference form renderScene method define a getter method, pass the method to the component you want.

 class practice extends Component { ... renderScene(route, navigator){ this._navigator = navigator } configureScene(route, routeStack){ ... } getNav = () => { return this._navigator } render() { return ( <Drawer content={<DrawerPanel getNav={this.getNav}/>} ... > <Navigator configureScene={this.configureScene} initialRoute={{name: 'Login', component: Login}} renderScene={(route, navigator) => this.renderScene(route, navigator)} style={styles.container} navigationBar={ <Navigator.NavigationBar style={styles.navBar} routeMapper={NavigationBarRouteMapper(this.openDrawer)} /> } /> </Drawer> ); } } 

Answer 2

I think you are wrong. If you use , should not has the same parent node with .

const Drawer = <Drawer
                  content={<DrawerPanel navigator={navigator}/>}
                  ...
               />
<Navigator
  initialRoute={{ name: 'Drawer', component: Drawer }}
  renderScene={(route, navigator) =>
  configureScene={(route) => {
    return Navigator.SceneConfigs.VerticalDownSwipeJump;
  }}
  renderScene={(route, navigator) => {
    let Component = route.component;
    return <Component {...route.params} navigator={navigator} />
   }} />
  }
/>

Answer 3

In update 2, you have done: var navigator = pr.getNav . This only assigns getNav function to the navigator variable you just defined. So your navigator here is just a reference to the getNav function.

What you need to do is var navigator = pr.getNav() and then pass the navigator to MadeButton . Hope is clarify things.