React natif Callback obtenir des accessoires de navigateur enfant de parent

Question

Je suis en train d'accéder route.id de mon navigateur de son conteneur parent pour être en mesure de masquer/afficher une fonction de Navigators route.id

Je crois communications enfant à parent nécessiterait une fonction de rappel, voici ma tentative.

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> 
     ); 
    } 
} 

Et est ici le composant enfant

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

Le problème que vous avez est que vous ne pouvez pas avoir deux this dans une méthode. Vous liez le this à partir du parent, donc this dans getNavigator est le this du parent. Dans ce this n'existe pas refs.navigator, c'est pourquoi cela ne fonctionne pas.

La façon dont vous implémentez normalement est d'avoir Navigator comme composant le plus haut et de passer une méthode navigateTo dans les accessoires des enfants (ou le contexte). Si vous souhaitez tout de même naviguer à partir du parent chez l'enfant que vous avez deux options:

1. Ajouter Redux et un magasin d'itinéraire, les dépêches parent une action, que l'enfant remplit dans la méthode componentDidReceiveProps.
2. Vous pouvez ajouter des méthodes à appeler à partir d'une référence de votre composant de navigation. Ce serait similaire à l'approche utilisée dans DrawerLayoutAndroid. Vous pouvez jeter un oeil à la React mise en œuvre indigène de voir comment cela fonctionne, ou you may look at the polyfill here.

Answer 2

Il y a un moyen plus facile d'obtenir une référence à l'objet du navigateur dans le contexte qui instancie le composant, sans l'utilisation d'un rappel pour le définir manuellement.

Inclure une propriété "ref" dans votre navigateur comme ceci:

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

Accès ultérieurement dans les fonctions pertinentes via la propriété refs du composant:

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