在React Native中，如何在示例应用中使用n视图

Question

我对React天然有疑问。我读了这个答案（如何在React-Native中进行多页应用程序？）但是我有点疑问：

• 我在React Native应用程序中使用Navigator对许多视图，但是我如何对n个组件做？例如，如果我有5个不同的视图，我使用了五次之前的代码...和n次？

Answer 1

在我的评论中富有元素。

而不是这个

if (routeId === 'SplashPage') {
    return (
        <SplashPage
            navigator={navigator}/>
    );
}
if (routeId === 'LoginPage') {
    return (
        <LoginPage
            navigator={navigator}/>
    );
}

只有一个可以动态获取组件的标签。

const Component = VIEW_COMPONENTS[routeid];

所以您的代码看起来像这样

const VIEW_COMPONENTS = {
    'SplashPage': SplashPage,
    'LoginPage': LoginPage
};
renderScene = ( route, navigator ) => {
    const ViewComponent = VIEW_COMPONENTS[route.id];
    return <ViewComponent navigator={navigator}/>
}

任何其他屏幕都将是您查找表的单行条目。我有一个带有40个屏幕的本机应用程序，它非常容易管理

添加。您也可以从中抽象出更多。使每个观点都不关心它的使用位置或下一个观点。而是将所有这些都是查找对象的一部分。指定每个视图可以显示的下一个路由。您可以传递所有其他信息，所有这些信息都是可配置的，并且您的屏幕可以在多个流中重复使用！