反応ネイティブの親にprops.navigatorを渡す

Question

反応ネイティブのサイドメニューを使用して異なるシーン間を移動すると問題が発生します。NavigatorIOSがSideMenuの内側にあるため、props.navigatorが存在しないと思いますNavigatorIOSはレンダリングされますか？

メインコード：見ての通り、私は上、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> 
     ); 
    } 
    } 
} 

一方、メニューのホームボタンをクリックすると、props.navigatorが定義されていないというエラーが表示されます。

これをどのように修正する必要がありますか？私のコードの問題は何ですか？私は、反応したネイティブの新鮮な学習者ですが、別のコンポーネントを正しい方法でどのようにラップするべきかについてはまだ分かりません。より良いビューを持つことが

は、ここではおそらく最も簡単な方法は、ルートにthis.props.navigatorを追加することですsource file

Answer 1

です。だから、好き：

{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小道具を指定します。