將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支持該函數呈現的子項。