Navigator vs NavigatorIOS React Native application

Question

我有一个使用 NavigatorIOS API 的 React Native 应用程序，并且正在尝试翻译相同的代码以使用 Navigator API。我的问题是在创建 NavigatorIOS 组件时，导航器是隐式传递的，而在 Navigator 中，您必须调用 renderScene 并制作自己的导航器道具。我不确定要传递哪个导航器(我是否创建一个还是什么？

该应用程序的结构是有2个选项卡：书籍和搜索，而BookList是列出所有书籍条目的另一个组件，因此当您按下其中一个时，它会将您带到BookDetail。现在，按一本书会把我带到同一页(书单(。我认为这是因为路线中只有一个页面，但我不确定如何初始化路线和导航器。

这就是我调用导航器将场景推送到"书单"中的路线的地方：

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

Answer 1

我看到你的renderScene函数的主体返回<BookList>组件，所以当调用它时，你只看到另一个BookList也就不足为奇了。请尝试以下操作：

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

只要您在书籍的源文件中导入或需要 BookDetail，renderScene 就会传递您在 navigator.push 中指定的route对象，该对象具有组件属性BookDetail

请注意，如果采用此方法，还必须更改initialRoute，以便将component属性设置为 BookList