加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react-native – ExNavigation:如何将道具传递给所有路由器组件

发布时间:2020-12-15 20:18:56 所属栏目:百科 来源:网络整理
导读:在下面的代码中,将数据库变量作为props传递给Router / NavigationProvider提供的所有组件的最佳方法是什么? import { createRouter,NavigationProvider,StackNavigation,} from '@exponent/ex-navigation'const Router = createRouter(() = ({ jobs: () = J
在下面的代码中,将数据库变量作为props传递给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>
}

谢谢!

解决方法

您应该创建一个新的javascript文件,该文件导出您的数据库连接并将其导入您希望使用它的组件中.

您还可以创建更高阶的组件,该组件将数据库连接作为组件的支柱.这类似于withNavigation,它内置于ExNavigation或者连接Redux的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()

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读