如何將導航器引用傳遞給React Native <Drawer/> ？

Question

在index.ios.js中使用react-native-drawer（ https://github.com/root-two/react-native-drawer ），我進行了以下設置，並嘗試將“導航器”引用傳遞到內容的< <Drawer />的DrawerPanel />。 我嘗試在<DrawerPanel />中執行與this.props.navigator.replace（）類似的操作時，在<DrawerPanel />中進行console.log（this.props.navigator），但傳入了錯誤的導航器引用。

如何像傳入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函數分配給您剛定義的導航器變量。 因此，這里的導航器只是對getNav函數的引用。

您需要做的是var navigator = pr.getNav() ，然后將導航器傳遞給MadeButton 。 希望是澄清事情。