将props.navigator传递给原生父母

Question

我有使用react-native-side-menu在不同场景之间导航的问题。主要是因为我的NavigatorIOS位于SideMenu内部，所以我相信props.navigator直到NavigatorIOS已呈现？

主要代码：

class HomeScene extends Component{ 
    static title = 'Home'; 

    constructor(props){ 
    super(props); 
    this.state={ 
     title:'Home' 
    }; 
    } 

    render(){ 
    return (
     <View style={styles.defaultContainer}> 
      <Text style={styles.defaultText}> 
       You are on the Home Page 
      </Text> 
      <View style={styles.group}> 
      {this._renderRow("To another page",() => { 
       this.props.navigator.push({ 
       title: Page.title, 
       component: Page, 
       passProps: {depth: this.props.depth ? this.props.depth + 1 : 1}, 
       onLeftButtonPress:() => this.props.navigator.pop(), 
       }); 
      })} 
      </View> 
     </View> 
    ); 
    } 

    _renderRow = (title: string, onPress: Function) => { 
    return (
     <View> 
     <TouchableHighlight onPress={onPress}> 
      <View style={styles.row}> 
      <Text style={styles.rowText}> 
       {title} 
      </Text> 
      </View> 
     </TouchableHighlight> 
     </View> 
    ); 
    }; 
} 

class Menu extends Component{ 
    constructor(props){ 
    super(props); 
    } 

    static propTypes={ 
    onItemSelected: React.PropTypes.func.isRequired, 
    }; 

    _renderRow = (title: string, onPress: Function) => { 
    return (
     <View> 
     <TouchableHighlight onPress={onPress}> 
      <View style={styles.row}> 
      <Text style={styles.rowText}> 
       {title} 
      </Text> 
      </View> 
     </TouchableHighlight> 
     </View> 
    ); 
    }; 

    render(){ 
    return(
     <ScrollView scrollsToTop={false} style={styles.sideMenuBar}> 
     {this._renderRow("Home", function(){ 
      this.props.navigator.replace({ 
      title: 'Home', 
      component: HomeScene, 
      passProps: {depth: this.props.depth ? this.props.depth + 1 : 1}, 
      onLeftButtonPress:() => this.props.navigator.pop(), 
      }); 
     })} 

     {this._renderRow("Page", function(){ 
      this.props.navigator.replace({ 
      title: 'Page', 
      component: Page, 
      passProps: {depth: this.props.depth ? this.props.depth + 1 : 1}, 
      onLeftButtonPress:() => this.props.navigator.pop(), 
      }); 
     })} 
     </ScrollView> 
     ) 
     } 
} 


class App extends Component { 
    render() { 
     const menu = <Menu onItemSelected={this.onMenuItemSelected} navigator={this.props.navigator}/>; <--- will be undefined 
     return (
       <SideMenu 
       menu={menu} 
       isOpen={this.state.isMenuSideBarOpen} 
       onChange={(isOpen)=>{this.updateMenuState(isOpen)}} 
       > 
       <StatusBar 
       backgroundColor="blue" 
       barStyle="light-content" 
       /> 
       <NavigatorIOS 
       initialRoute={{ 
        component: HomeScene, 
        title: this.state.selectedItem, 
        leftButtonIcon: this.state.menuIcon, 
        onLeftButtonPress:()=>{ 
        this.toggle(); 
        } 
       }} 
       style={{flex: 1}} 
       tintColor="#FFFFFF" 
       titleTextColor="#FFFFFF" 
       barTintColor='#000099' 
       > 
       </NavigatorIOS> 
      </SideMenu> 
     ); 
    } 
    } 
} 

正如你看到的，我用同样的代码在菜单和主页现场处置导航，而是由NavigatorIOS呈现的主页上会有props.navigator财产，在另一方面，如果我点击菜单上的主页按钮，它会给我一个错误，说props.navigator是未定义的。

那么我该如何解决这个问题？我的代码有什么问题？我是一个反应本土的新鲜学习者，对于如何以正确的方式包装不同的组件仍然有点困惑。

为了有一个更好的视野，这里是source file

Answer 1

也许最简单的方法是添加this.props.navigator的路线。因此，像：

{this._renderRow("To another page",() => { 
       this.props.navigator.push({ 
       navigator: this.props.navigator 
       title: Page.title, 
       component: Page, 
       passProps: { 
        depth: this.props.depth ? this.props.depth + 1 : 
         1}, 
        onLeftButtonPress:() => 
         this.props.route.navigator.pop() 
       }); 
      })} 

然后，您应该能够使用this.props.route.navigator路由访问导航。我假设App就像你的根组件，并在其余之前被渲染。

我不熟悉NavigatorIOS，但如果有一种方法可以覆盖renderScene函数，那将是一个更好的方法 - 只需指定navigator支持该函数呈现的子项。