如何在 React Native 中使用示例应用程序中的 N 个视图

Question

我对 React Native 有点疑惑。我读了这个答案 (How to do a multi-page app in react-native?) 但我有点怀疑：

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

Answer 1

避免更多关于我的评论。

而不是这个

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

只需要一个散列table，您可以使用它来动态获取组件。

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

任何其他屏幕都将是您查找的单行条目 table。我有一个有 40 个屏幕的本机应用程序，它很容易像这样管理

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

如何在 React Native 中使用示例应用程序中的 N 个视图

How use N views in sample app in react native

components

view

navigator

reactjs

react-native