Question

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

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

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

那么您的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。

Answer 2

我知道现在这是一个老问题，但你可以通过导入像

这样的代码来实现

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

Answer 3

不使用Redux更改菜单的最简单方法是使用createSwitchNavigator。

https://reactnavigation.org/docs/en/auth-flow.html

在react-navigation中刷新contentComponent

3 个答案: