首页 文章

Navigator vs NavigatorIOS React Native应用程序

提问于
浏览 次
3

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

该应用程序的结构是有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 回答

  • 2

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

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

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

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

    回复于

相关问题