リアクトネイティブコールバックは、親

Question

から子ナビゲーターの小道具を取得し、私はナビゲーターに応じて表示/非表示することができるように彼の親コンテナからの私のナビゲーターのroute.idにアクセスしようとしているが、私は信じてい

をroute.id親から子への通信にコールバック関数が必要な場合は、ここで私の試みです。

var Home = require('./Home'); 
var Navigation = require('./Navigation'); 

class Parent extends Component { 
    render() { 
     return (
      <View style={styles.appContainer}> 
       <Navigation getNavigator={this.getNavigator.bind(this)}/> 
       <Footer /> 
      </View> 
     ); 
    } 
} 

そして、ここでは、子コンポーネントが

ある

var _navigator; 

class Navigation extends Component { 
    getNavigator(route){ 
     return this.refs.navigator.push(route); 
    } 
    render() { 
     return (
      <Navigator 
      style={styles.container} 
      ref={(navigator) => { this.navigator = navigator; }} 
      initialRoute={{ 
        id: 'Home', 
        index:0, 
       }} 
      renderScene={this.navigatorRenderScene} 
      configureScene={(route) => { 
       if (route.sceneConfig) { 
        return route.sceneConfig; 
       } 
       return Navigator.SceneConfigs.PushFromRight; 
      }} 
      navigationBar={ 
       <NavigationBar 
       style={{backgroundColor: '#f5f6f8'}} 
       routeMapper={NavigationBarRouteMapper} /> 
      } 
      /> 
     ); 
    } 
    navigatorRenderScene(route, navigator) { 
     _navigator = navigator; 
     switch (route.id) { 
      case 'Home': 
       return (<Home navigator={navigator} {...route.passProps} title="Home" />); 
       ...  
     } 
    } 
} 

Answer 1

あなたが持っている問題は、あなたがこの方法で2 thisを持っていないことです。親からのthisをバインドするので、this内のgetNavigatorは、親のthisです。このthisにはrefs.navigatorが存在しないため、これが機能しません。

通常実装する方法は、ナビゲータを最上位のコンポーネントとして、子（またはコンテキスト）の小道具にnavigateToメソッドを渡すことです。あなたはまだ子供で、親から移動したい場合は、2つのオプションがあります。子供がcomponentDidReceiveProps方法で満たしていることを

1. 追加Reduxのをとルートストアを持っている、親は、アクションをディスパッチします。
2. ナビゲータコンポーネントのrefから呼び出すメソッドを追加することができます。これは、DrawerLayoutAndroidで使用されているアプローチに似ています。インクルードは、それがどのように動作するかを確認するために、ネイティブ実装を反応させるのではあなたは見ても、または​​

Answer 2

は使用せずに、コンポーネントのインスタンスを作成し、コンテキスト内のナビゲータオブジェクトへの参照を取得する簡単な方法がありますコールバックを手動で設定します。コンポーネントのレフリープロパティを介した後に、関連する機能で

render() { 
    return (
     <View style={{flex: 1}}> 
      <Navigator 
       ref="mainNavigator" 
       initialRoute={initialStack[0]} 
       renderScene={this.renderScene.bind(this)} /> 
      </View> 
     ); 
} 

アクセスそれを：：

componentDidMount() { 
    alert(this.refs.mainNavigator); // [Object] [object] 
} 

は、このようなあなたのナビゲータで「参照」プロパティを含めます