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

Question

在我的 index.ios.js 中使用 react-native-drawer (https://github.com/root-two/react-native-drawer)，我进行了以下设置并尝试将“导航器”引用传递到 的内容的 中。我在 中使用 console.log(this.props.navigator) 但是传入了错误的导航器引用，当我尝试在 中执行类似于 this.props.navigator.replace() 时>

我怎样才能像传入renderScene 和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>
    );
  }
}

提前谢谢你！

更新 3****

在我的<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>
)

然后在我的<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

这是应该的。您保存导航器参考表单renderScene 方法定义一个getter 方法，将该方法传递给您想要的组件。

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

我认为你错了。如果使用 ，则不应与 具有相同的父节点。

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

在更新 2 中，您已完成：var navigator = pr.getNav。这只会将 getNav 函数分配给您刚刚定义的 navigator 变量。所以这里的导航器只是对 getNav 函数的引用。

您需要做的是var navigator = pr.getNav()，然后将导航器传递给MadeButton。希望是澄清事情。