android - Navigator 与 NavigatorIOS React Native 应用程序

Question

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

应用程序的结构是有 2 个选项卡: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
        }}/>
    );
}

这是我的 Navigator 版本，它不起作用:

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

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

请注意，您还必须更改 initialRoute有一个component属性设置为 BookList如果你采用这种方法