ExNavigation：すべてのルータコンポーネントに小道具を渡す方法は？

Question

次のコードでは、Router/NavigationProviderが提供するすべてのコンポーネントにデータベース変数をpropsとして渡す最も良い方法は何ですか？

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

データベース接続をエクスポートし、使用するコンポーネントにインポートする新しいjavascriptファイルを作成する必要があります。

データベース接続をコンポーネントの小道具として与える上位コンポーネントを作成することもできます。 ExNavigationに組み込まれているwithNavigation、またはReduxのReactバインディングに付属のconnectに似ています。

しかし、HOCは少し進んだ話題です（ただし、把握するのは難しくありません）。ここではHOCがない例です。

サービス/ 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 

容器/ Jobs.js

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