Come posso passare il riferimento a Navigator in renderScene?

Question

Ho sperimentato con React Native e ho difficoltà a passare un riferimento al navigatore nella scena che sto visualizzando. Senza il navigatore, gli elementi di NewsList non possono attivare un cambio di scena.

render: function() { 
    return (
     <Navigator 
      initialRoute={ { name: 'NewsList', index: 0 } } 
      renderScene={ (route, navigator) => NewsList } 
     />              
    );               
}, 

Analogamente, nella funzione di rendering della scena ho bisogno di passare il navigatore alla funzione di rendering delle righe.

<UIExplorerPage noSpacer={true} noScroll={true}> 
    <ListView 
     dataSource={this.state.dataSource} 
     renderRow={this._renderRow} 
     onEndReached={this.onEndReached} 
    /> 
</UIExplorerPage> 

Qual è il modo idiomatico per passare riferimenti come questo in giro?

Answer 1

Se ho capito bene la tua domanda, stai dicendo che l'elenco notizie componenti dell'oggetto, hanno bisogno di un riferimento al navigatore, al fine di innescare un evento di navigazione. Questo (IMO) è l'approccio sbagliato.

Invece, passare le voci di elenco un callback. Il callback è un metodo sul componente Elenco notizie padre e ha già un riferimento al navigatore che è possibile chiamare. In questo modo è possibile evitare di passare il navigatore fino in fondo alla gerarchia dei componenti.

posso dare un esempio di codice, se questo non è chiaro :)

Answer 2

come Colin accennato, è necessario passare un callback per le vostre voci di elenco. Di seguito è riportato il codice di un progetto di esempio (UIExplorer) in grado di reagire da solo.

Qui, stiamo passando l'oggetto navigator al NavMenu che è il componente lista.

var TabBarExample = React.createClass({ 
    // Other methods... blah blah 
    renderScene: function(route, nav) { 
     switch (route.id) { 
      case 'navbar': 
      return <NavigationBarSample navigator={nav} />; 
      case 'breadcrumbs': 
      return <BreadcrumbNavSample navigator={nav} />; 
      case 'jumping': 
      return <JumpingNavSample navigator={nav} />; 
      default: 
      return (
       <NavMenu 
       message={route.message} 
       navigator={nav} 
       onExampleExit={this.props.onExampleExit} 
       /> 
      ); 
     } 
    }, 

    render: function() { 
     return (
      <Navigator 
      style={styles.container} 
      initialRoute={{ message: "First Scene", }} 
      renderScene={this.renderScene} 
      configureScene={(route) => { 
       if (route.sceneConfig) { 
       return route.sceneConfig; 
       } 
       return Navigator.SceneConfigs.FloatFromBottom; 
      }} 
      /> 
     ); 
     } 
}); 

Nella componente NavMenu, stiamo passando una richiamata sul onPress di ogni NavButton.

class NavMenu extends React.Component { 
    render() { 
    return (
     <ScrollView style={styles.scene}> 
     <Text style={styles.messageText}>{this.props.message}</Text> 
     <NavButton 
      onPress={() => { 
      this.props.navigator.push({ 
       message: 'Swipe right to dismiss', 
       sceneConfig: Navigator.SceneConfigs.FloatFromRight, 
      }); 
      }} 
      text="Float in from right" 
     /> 
     <NavButton 
      onPress={() => { 
      this.props.navigator.push({ 
       message: 'Swipe down to dismiss', 
       sceneConfig: Navigator.SceneConfigs.FloatFromBottom, 
      }); 
      }} 
      text="Float in from bottom" 
     /> 
     // Omitted rest of the NavButtons. 
     </ScrollView> 
    ); 
} 

Ecco un esempio di link.

Answer 3

La domanda è stata formulata in modo un po 'vago. Ho risolto il problema aggiungendo il navigatore a UIExplorerPage, ad esempio <UIExplorerPage navigator={navigator} />. È possibile accedere alle proprietà all'interno di UIExplorerPage utilizzando this.props.