在React Native中如何在示例应用程序中使用N个视图 [英] How use N views in sample app in react native

问题描述

我对React Native有所怀疑。我阅读了此答案（如何进行多页app-react-native？），但我仍然有一点疑问：

I have some doubt in React Native. I read this answer (How to do a multi-page app in react-native?) but I stayed with a little bit doubt:

• 我在React中使用Navigator来访问许多视图本机应用程序，但是我如何处理N个组件？例如，如果我有5个不同的视图，那么我已经使用了before代码五次...和n次？

推荐答案

可以使我的评论更多。

to ellude more on my comment.

代替此

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

仅具有用于动态获取组件的哈希表。

just have a hashtable that you use to get the component dynamically.

const Component = VIEW_COMPONENTS[routeid];

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

so your code would look something like this

const VIEW_COMPONENTS = {
    'SplashPage': SplashPage,
    'LoginPage': LoginPage
};

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

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

any additional screen would be a single line entry to your lookup table. I have a native app with 40 screens and its very easy to manage like this

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

to add to this. you can abstract more out of this too. make every view not care about where it is used or what its next view is. Instead make all of that a part of your lookup object. specify a next route that every view can show. you can pass any additional information all of which is configurable and your screens can be reused on multiple flows!

这篇关于在React Native中如何在示例应用程序中使用N个视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！