Reactjs 所有组件的通用抽屉布局

我试图为所有组件提供一个通用的抽屉布局，因此我所做的是将抽屉布局作为一个组件，包含所有链接，在抽屉布局Android中包含props.children，并呈现初始页面，但在这个组件中，我无法访问this.props.navigator

home.js

<DrawerLayout>
    <View style={styles.container}>
      <Text style={styles.title}> Welcome User </Text>
      <Text style={styles.text}> Your new token is {this.state.accessToken} </Text>
    </View>
  </DrawerLayout>

欢迎用户
您的新令牌是{this.state.accessToken}

in-DrawerLayout.js

  render() {
var navigationView = (
  <View style={{flex: 1, backgroundColor: '#fff'}}>
    <TouchableHighlight onPress={this.redirect.bind(this, 'qr_code')} style={styles.button}>
      <Text style={styles.buttonText}>
        Scan code
      </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.button}>
      <Text style={styles.buttonText}>
        Logout
      </Text>
    </TouchableHighlight>
  </View>
);
//We check to se if there is a flash message. It will be passed in user update.
let flashMessage;
if (this.props.flash) {
   flashMessage = <Text style={styles.flash}>{this.props.flash}</Text>
} else {
   flashMessage = null
}
return(
  <DrawerLayoutAndroid
    drawerWidth={300}
    drawerPosition={DrawerLayoutAndroid.positions.Left}
    renderNavigationView={() => navigationView}>
      {this.props.children}
  </DrawerLayoutAndroid>
);

render（）{
var navigationView=(
扫描码
注销
);
//我们向se检查是否有闪光消息。它将在用户更新中传递。
让闪光信息；
如果（此.props.flash）{
flashMessage={this.props.flash}
}否则{
flashMessage=null
}
返回(
导航视图}>
{this.props.children}
);

} }

有一个重定向函数，我尝试导航到其他组件，而this.props.navigator.push不是一个函数