android - Navigator vs NavigatorIOS React Native 应用

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

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

这是我调用导航器将场景推送到 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}/>
            }
        />
    );
}

最佳答案

我看到您的 renderScene 函数的主体返回 <BookList> 组件，因此当它被调用时，您只会看到另一个 BookList，这并不奇怪。试试这样的:

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

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

关于android - Navigator vs NavigatorIOS React Native 应用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43309249/