Question

我有一个使用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
        }}/>
    );
}

这是我的导航器版本无效：

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

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

Navigator vs NavigatorIOS React Native应用程序

1 个答案: