React Native - Navigator I bambini ricorsivi si bloccano

Question

Sto esaminando il componente Navigator in React-Native ma non riesco a farlo accettare un nodo figlio già presente nello stack. Per esempio. se prendiamo l'app di Facebook per esempio. Un utente può cercare un utente, quindi fare clic su amici, quindi fare clic su un altro utente. Questo si blocca quando provo ad aggiungerlo alla pila con l'errore

Invariant Violation: Expected a component class, got [object Object]. 

Ho provato questo tramite il navigatore di serie e attualmente il React-Native-Router. Il mio codice attuale assomiglia a questo

class OptionsBranch extends Component { 
    render() { 
     /*<TouchableHighlight style={styles.spaceOut} onPress={() => {this.props.toRoute({name:"test", component:UserProfile})}}><Text>[push]</Text></TouchableHighlight>*/ 
     return (
      <View style={styles.container}> 
       <Text>[OptionsScreen]</Text> 
       <TouchableHighlight style={styles.spaceOut} onPress={() => {this.props.toRoute({id:"x", name:"test", component:UserProfile})}}><Text>[push]</Text></TouchableHighlight> 
       <TouchableHighlight style={styles.spaceOut} onPress={() => {this.props.toBack()}}><Text>[pop]</Text></TouchableHighlight> 
      </View> 
     ); 
    } 
} 

posso arrivare a questo lavoro a tempo indeterminato fino a quando non ho mai ri-uso una classe. Nel momento in cui lo faccio, ottengo l'errore.

Vorrei postare collegamenti alla ricerca ma non c'è molto là fuori per Navigator (Piuttosto che NavigatorIOS) ad eccezione degli esempi inclusi con Framework e sembrano raggiungere ti ma senza passare un percorso completo, di cui avrei bisogno .

ad es.

<NavButton onPress={() => { navigator.push(_getRandomRoute()) }} text="Push"/> 

Se provo ad utilizzare questo nel mio codice (senza React-nativo-Router) cioè

<TouchableHighlight onPress={() => { this.props.navigator.push({ name:"myComponent", component:myComponent }) }} /> 

esso errori anche.

Perché è questo? Si tratta di una limitazione di Navigator? È un errore nel mio codice?

Un'app per piastra caldaie che utilizza TabBar e Navigator potrebbe essere stata molto utile da cui imparare. NavigatorIOS è un po 'limitato per la personalizzazione.

Answer 1

Sembra che il mio errore riguardasse una dipendenza ciclica.

Per impedirlo, LazyLoaded le classi di cui avevo bisogno per popolare il Navigatore. Invece di "richiederli" tutti in cima ai file js (sì, ignora tutti i tutorial che hai fatto). Invece li richiedono nelle funzioni che li useranno. Questo rimuove la dipendenza ciclica e consente di riutilizzare le classi.

ad es. invece di questo:

var myClass = require('./MyClass'); 
... 
(some other code) 
... 
render: function(){ 
    return(
     <TouchableHighlight onPress={() => {this.props.toRoute({name: "myPage", component: myClass, data: "SomeData" })}> 
      <Text>Link</Text> 
     </TouchableHighlight> 
    ); 
} 

fare questo:

goToMyRoute: function(myParameter){ 
    var myClass = require('./MyClass'); 
    this.props.toRoute({name: "myPage", component: myClass, data: myParameter }) 
} 

render: function(){ 
    return(
     <TouchableHighlight onPress={() => {this.goToMyRoute("SomeData")} }> 
      <Text>Link</Text> 
     </TouchableHighlight> 
    ); 
}