如何在示例应用程序中使用 N 个视图进行本机反应

Posted 2023-02-23

【中文标题】如何在示例应用程序中使用 N 个视图进行本机反应

【英文标题】：How use N views in sample app in react native

【发布时间】：2017-04-27 23:20:15

【问题描述】：

我对 React Native 有一些疑问。我读了这个答案（How to do a multi-page app in react-native?）但我有点怀疑：

我在 React Native App 中使用 Navigator 来查看许多视图，但是我如何处理 N 个组件？例如，如果我有 5 个不同的视图，我已经使用了之前的代码五次......和 ​​n 次？

【问题讨论】：

不，你不需要像那样渲染......这是一个糟糕的答案。您可以通过查找表动态呈现。

【参考方案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 个屏幕的本机应用程序，并且像这样很容易管理

添加到这个。你也可以从中抽象出更多。让每个视图都不关心它在哪里使用或它的下一个视图是什么。而是将所有这些都作为查找对象的一部分。指定每个视图都可以显示的下一条路线。您可以传递任何其他信息，所有这些信息都是可配置的，并且您的屏幕可以在多个流程中重复使用！

【讨论】：

谢谢！所以我可以在组件之间导航？例如，在这种情况下，每个组件对应一个问题。