javascript - 在 react 导航中刷新 contentComponent

Question

我正在使用 React-Navigation我通过使用 React-Navigation 的 contentComponent 来使用自定义抽屉的功能。

const DrawerNavigation = DrawerNavigator({
  DrawerStack: { screen: DrawerStack }
}, {
  contentComponent: DrawerComponent,
  drawerWidth: 300
})

这里的 DrawerComponent 是我的自定义抽屉导航，我在其中使用了自定义导航项，例如用户名、个人资料图片、电子邮件地址和其他菜单。

现在，每当用户更新他们的个人资料时，我想刷新我的 DrawerComponent，但我找不到任何方法来做到这一点。任何人都可以建议我实现这个的好方法吗？

Answer 1

这里有几个选项，所有选项都与您希望如何实现状态管理有关。

首先，一种解决方案是让您的用户状态位于创建 DrawerNavigator 的组件中，并将其传递给您的自定义抽屉组件。这带来了必须在状态更改时重新创建导航器并创建闪烁的缺点。我不建议使用此解决方案，但值得一提。

你也可以使用 React Context ，将您的用户状态放在顶级组件中，创建一个提供者将用户作为值传递给它，并使您的抽屉成为此上下文的使用者。这样，每次用户更改您的抽屉组件时都会重新呈现。

---

我个人使用的是 Redux 将我的 Drawer 直接连接到我的全局状态。它涉及一些设置，但最终是值得的。根组件可能如下所示:

import React from 'react'
import { Provider } from 'react-redux'

export default () => (
  <Provider store={store}>
    <App />
  </Provider>
) 

store 的结果是:

import { createStore, combineReducers } from 'redux'
import reducers from './reducers'

const store = createStore(combineReducers(reducers))

您的 reducer 将成为您应用的状态，其中一个将专门用于您的用户数据。

那么你的 Drawer 组件可能是:

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import { connect } from 'react-redux'

@connect(({ user }) => ({ user }))
class Drawer extends Component {
  render () {
    const { user } = this.props
    return (
      <View>
        <Text>My name is {user.name}</Text>
      </View>
    )
  }
}

export default Drawer

现在，每次您更改 user reducer 时，此 Drawer 组件都会重新呈现。

关于 Redux，您应该了解一些事情，因此您可能应该阅读一下 Getting Started docs .