导航器与导航器IOS React Native应用程序

Question

我有一个使用NavigatorIOS API工作的React Native应用程序，并尝试将相同的代码翻译成使用Navigator API。我的问题是，在创建NavigatorIOS组件时，导航器会被隐式传递，而在Navigator中，您必须调用renderScene并创建自己的navigator属性。我不确定要传递哪个导航器（我要创建一个还是什么？）。

该应用程序的结构是有两个标签：Book和Search，并且BookList是另一个列出所有图书条目的组件，因此当您按下其中之一时，它会将您带到BookDetail。现在，按一本书，我进入同样的页面（BookList）。我认为这是因为路由中只有一个页面，但我不确定如何初始化路由和导航器。

这是我在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}/>
            }
        />
    );
}

- Rae Perez

Answer 1

我看到你的renderScene函数返回了<BookList>组件，所以当它被调用时只会看到另一个BookList，并不奇怪。尝试使用以下代码替代：

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

只要在Books源文件中导入或需要了BookDetail，renderScene将会传递你在navigator.push中指定的route对象，该对象具有组件属性BookDetail。请注意，如果采用此方法，您还必须更改initialRoute，将其组件属性设置为BookList。

- SoZettaSho