Navigator vs NavigatorIOS React Native 应用程序答案

【问题标题】：Navigator vs NavigatorIOS React Native applicationNavigator vs NavigatorIOS React Native 应用程序
【发布时间】：2017-09-04 16:12:58
【问题描述】：

我有一个使用 NavigatorIOS API 工作的 React Native 应用程序，并且正在尝试翻译相同的代码以使用 Navigator API。我的麻烦是在创建 NavigatorIOS 组件时，navigator 是隐式传递的，而在 Navigator 中，您必须调用 renderScene 并制作自己的 navigator 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}/>
            }
        />
    );
}

【问题讨论】：

标签： android ios android-studio react-native

【解决方案1】：

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

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

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

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

【讨论】：