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

在我的index.ios.js中使用react-native-drawer（ https://github.com/root-two/react-native-drawer ），我有以下的设置，并试图将“navigator”引用传递给内容的< Drawer />的DrawerPanel />。 我在<DrawerPanel /> console.log（this.props.navigator），但是当我尝试类似于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

这是应该如何做的。 您保存导航器参考formsrenderScene方法定义一个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函数分配给刚刚定义的导航器variables。 所以你的导航器只是对getNav函数的引用。

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