6

次のコードで、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>
}

ありがとう！

4

1 に答える 1

-1

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

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

ただし、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()

ルート.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
      )}
    )
  }
}
于 2016-10-15T18:51:52.540 に答える