ExNavigation:如何将props传递给所有路由器组件

Question

在下面的代码中，将数据库变量作为道具传递给Router/NavigationProvider所服务的所有组件的最佳方式是什么?

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是一个有点高级的主题(但并不难掌握!)，这里有一个没有它的例子。

服务/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
      )}
    )
  }
}