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

Question

用我的index.ios.js反應母語抽屜（https://github.com/root-two/react-native-drawer），我有以下設置，並試圖通過「導航」參考爲內容的< DrawerPanel/<抽屜/>的>。我console.log（this.props.navigator）在< DrawerPanel />但是當我試圖做類似於this.props.navigator.replace（）的時候傳入一個錯誤的導航器引用在< DrawerPanel />

如何傳遞正確的導航器構造函數，例如傳入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

我認爲你是錯的。如果你使用，不應該有相同的父節點。

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 2

這是應該如何完成的。您保存導航器參考表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 3

在更新2，你這樣做：var navigator = pr.getNav。這隻會將getNav函數分配給您剛剛定義的導航器變量。所以你的導航器只是對getNav函數的引用。

你需要做的是var navigator = pr.getNav()，然後通過導航器MadeButton。希望澄清事情。