How use N views in sample app in 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:

I use Navigator to many views in React Native App, but how I do to N componentes? For example, if I have 5 different views I have use the before code five times... and n times?

回答1:

to ellude more on my comment.

instead of this

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

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!

来源：https://stackoverflow.com/questions/41111923/how-use-n-views-in-sample-app-in-react-native

标签

reactjs

view

react-native

components

navigator