Navigator VS NavigatorIOS React Native應用程序

我有一個使用NavigatorIOS API工作的React Native應用程序，並且試圖翻譯相同的代碼以使用Navigator API。我的麻煩是在創建NavigatorIOS組件時，導航器被隱式傳遞，而在導航器中，您必須調用renderScene並創建自己的導航器道具。我不確定要通過什麼導航（我是否創建一個或什麼？）。Navigator VS NavigatorIOS React Native應用程序

該應用程序的結構是有兩個選項卡：Book和Search，BookList是列出所有書籍條目的另一個組件，因此當您按下其中一個時，它會將您帶到BookDetail。現在，按下一本書會將我帶到同一頁面（BookList）。我認爲這是因爲路線中只有一個頁面，但我不確定如何初始化路線和導航器。

這就是我所說的導航推一個場景到路線書目：

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

這是NavigatorIOS版本：

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

這是不工作我的導航版：

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

來源

2017-04-09 Rae Perez

我看到你的renderScene函數的函數返回<BookList>組件，所以當它被調用時你只看到另一個BookList並不奇怪。嘗試這樣的事情，而不是：

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

只要你導入或圖書在源文件中需要BookDetail，renderScene會傳遞您在navigator.push指定的route對象，它具有組件屬性BookDetail

請注意，如果您採用此方法，您還必須將initialRoute更改爲component屬性設置爲BookList

來源

2017-04-09 17:24:16 SoZettaSho

謝謝！這很好 –

Navigator VS NavigatorIOS React Native應用程序

回答

相關問題