Navigator vs NavigatorIOS React Native Anwendung

Question

Ich habe eine React Native App arbeiten mit NavigatorIOS API, und versuche, den gleichen Code zu übersetzen, um Navigator API zu verwenden. Mein Problem ist, dass beim Erstellen einer NavigatorIOS-Komponente der Navigator implizit übergeben wird, während Sie im Navigator renderScene aufrufen und eine eigene Navigator-Prop erstellen müssen. Ich bin mir nicht sicher, welchen Navigator ich weitergeben soll (erstelle ich einen oder was?).

Die Struktur der App ist, dass es zwei Registerkarten gibt: Book und Search, und BookList ist eine weitere Komponente, die alle Bucheinträge auflistet, so dass Sie, wenn Sie eines von ihnen drücken, BookDetail bringt. Im Moment bringt mich das Drücken eines Buches zur selben Seite (BookList). Ich denke, das liegt daran, dass es nur eine Seite in der Route gibt, aber ich bin mir nicht sicher, wie ich die Route und den Navigator initialisieren soll.

showBookDetail(book) { 
    this.props.navigator.push({ 
     title: book.volumeInfo.title, 
     component: BookDetail, 
     passProps: {book} 
    }); 
} 

Dies ist die NavigatorIOS Version:

class Books extends React.Component { 
render() { 
    return (
    <NavigatorIOS 
      style={styles.container} 
      initialRoute={{ 
     title: 'Featured Books', 
     component: BookList 
     }}/> 
    ); 
} 

Das ist mein Navigator-Version, die nicht funktioniert, eine Szene auf der Strecke in Booklist schieben

Dies ist, wo ich den Navigator rufen siehe

class Books extends React.Component { 
render() { 
    return (
     <Navigator 
      style={styles.container} 
      initialRoute={{ title: 'Featured Books', index: 0}} 
      renderScene={(route, navigator) => 
       <BookList title={route.title} navigator={navigator}/> 
      } 
     /> 
    ); 
} 

Answer 1

ich den Körper Ihrer renderScene Funktion gibt die: <BookList> Komponente, so ist es nicht wirklich überraschend, dass, wenn es aufgerufen wird, Sie nur eine andere BookList sehen. Versuchen Sie so etwas wie diese stattdessen:

renderScene={(route, navigator) => 
    <route.component title={route.title} navigator={navigator}/>  
} 

Solange Sie importiert oder erforderlich BookDetail in der Quelldatei für Bücher, wird renderScene weitergegeben werden, um das route Objekt, das Sie in navigator.push angegeben, die die Komponenteneigenschaft hat BookDetail

Beachten Sie, dass Sie auch Ihre initialRoute ändern müssen, um eine component Eigenschaft auf BookList gesetzt zu haben, wenn Sie diesen Ansatz nehmen