ExNavigation: सभी राउटर घटकों के लिए प्रोप कैसे पास करें?

Question

निम्न कोड में, राउटर/नेविगेशनप्रोवाइडर द्वारा प्रदत्त सभी घटकों के लिए डेटाबेस चर को पारित करने का सबसे अच्छा तरीका क्या है?

import { 
    createRouter, 
    NavigationProvider, 
    StackNavigation, 
} from '@exponent/ex-navigation' 

const Router = createRouter(() => ({ 
    jobs:() => Jobs, 
    sample:() => Sample 
})) 

render() { 
    const database = this.openDatabase() 
    <NavigationProvider router={Router}> 
     <StackNavigation initialRoute={Router.getRoute('home')} /> 
    </NavigationProvider> 
} 

धन्यवाद!

Answer 1

आपको एक नई जावास्क्रिप्ट फ़ाइल बनाना चाहिए जो आपके डेटाबेस कनेक्शन को निर्यात करे और इसे अपने घटक में आयात करें जिसे आप इसका उपयोग करना चाहते हैं।

आप उच्च ऑर्डर घटक भी बना सकते हैं जो आपके घटक के प्रोप के रूप में डेटाबेस कनेक्शन देता है। यह withNavigation जैसा है जो एक्सनेविगेशन या connect में अंतर्निहित है जो रेडक्स की प्रतिक्रिया बाइंडिंग के साथ आता है।

हालांकि, चूंकि एचओसी थोड़ा उन्नत विषय है (लेकिन समझने में कठोर नहीं है!) यहां इसके बिना एक उदाहरण है।

सेवाओं/database.js

// Open database connection here and export it like any other module. 
// The following is pseudo code to illustrate example 

import { database } from 'database' 
export default database.connect() 

routes.js

import Jobs from './containers/Jobs' 
import Sample from './containers/Sample' 
import { createRouter } from '@exponent/ex-navigation' 

const Router = createRouter(() => ({ 
    jobs:() => Jobs, 
    sample:() => Sample 
})) 

export default Router 

App.js

import React from 'react' 
import { 
    NavigationProvider, 
    StackNavigation, 
} from '@exponent/ex-navigation' 

const App =() => (
    <NavigationProvider router={Router}> 
    <StackNavigation initialRoute={Router.getRoute('home')} /> 
    </NavigationProvider> 
) 

export default App 

कंटेनर/जॉब्स.जेएस

import React, { Component } from 'react' 

// Import database connection in every container component you wish to use it 
import databaseConnection from '../services/database' 

export default class Jobs extends Component { 
    state = { 
    jobs: [] 
    } 

    componentDidMount() { 
    databaseConnection 
     .get('jobs') 
     .then(jobs => this.setState({ jobs })) 
    } 

    render() { 
    return (
     {this.state.jobs.map(job => 
     // Render jobs 
    )} 
    ) 
    } 
}