我正在使用React-Navigation，我通过使用 React-Navigation 的 contentComponent 来使用自定义抽屉的功能。
const DrawerNavigation = DrawerNavigator({
DrawerStack: { screen: DrawerStack }
}, {
contentComponent: DrawerComponent,
drawerWidth: 300
})
这里的 DrawerComponent 是我的自定义导航抽屉，我在其中使用了自定义导航项，例如用户名、头像、电子邮件地址和其他菜单。
现在，每当用户更新他们的个人资料时，我想刷新我的 DrawerComponent，我无法找到任何方法来做到这一点。任何人都可以建议我实现这一点的好方法吗？
【问题讨论】：
标签： javascript android ios react-native react-navigation
这里有几个选项，所有选项都与您希望如何实现状态管理密切相关。
首先，一种解决方案是让组件中的用户状态创建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
现在，每次您更改用户 reducer 时，此 Drawer 组件都会重新渲染。
关于 Redux，您应该了解一些事情，因此您可能应该阅读一下 Getting Started docs。
【讨论】：
我知道这是一个老问题，但您可以通过导入类似的代码来做到这一点
import DrawerView from '../Drawer/Drawer'
contentComponent: DrawerView
then in the DrawerView file
class DrawerView extends Component {
render(){
return(
//Do your stuff here
)
}
}
export default DrawerView;
有关更多信息，请访问此链接并感谢 Kakul Gupta 提供此https://codeburst.io/custom-drawer-using-react-navigation-80abbab489f7
【讨论】：
不使用 redux 更改菜单的最简单方法是使用 createSwitchNavigator。
【讨论】：