ExNavigation: cách truyền đạo cụ cho tất cả các thành phần của bộ định tuyến?

Question

Trong đoạn mã sau, cách tốt nhất để chuyển biến cơ sở dữ liệu làm đạo cụ cho tất cả các thành phần được Router/NavigationProvider phục vụ là gì?

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

Cảm ơn!

Answer 1

Bạn nên tạo tệp javascript mới xuất kết nối cơ sở dữ liệu của bạn và nhập nó vào thành phần bạn muốn sử dụng.

Bạn cũng có thể tạo thành phần thứ tự cao hơn cho phép kết nối cơ sở dữ liệu như một biện pháp chống đỡ cho thành phần của bạn. Điều này tương tự như withNavigation được tích hợp sẵn trong ExNavigation hoặc connect đi kèm với các ràng buộc React của Redux.

Tuy nhiên, vì HOC là một chủ đề nâng cao chút ít (nhưng không khó nắm bắt!) Đây là một ví dụ không có nó.

dịch vụ/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 

vùng chứa/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 
    )} 
    ) 
    } 
}