如何 link 带有抽屉路由器通量的数据容器？

Question

我像这样在 routers-flux 索引文件中创建了侧边菜单抽屉

    <Scene
    key="drawer"
    drawer
    contentComponent={Menu}
    drawerWidth={300}  >

    exp : <Tab> </Tab>

    </Scene>

它工作正确，现在在选项卡上显示侧边菜单我想在侧边菜单上显示用户名、电子邮件等数据。

但是我如何在菜单抽屉中获取数据，因为抽屉标签不允许同时编写组件和容器，它只允许我编写只是一个视图的 contentComponent？

Answer 1

您的菜单组件必须是 "smart component" - 使用上下文 API 或类似 Redux 的东西来访问它。

从您展示的代码开始并使用 redux，它会是这样的：

import React from 'react'
import { connect } from 'react-redux';

const Menu = props => (
  <View> 
    <Text>{props.username}</Text>
  </View>
)

export default connect((state) => ({ username: state.auth.username }))(Menu);

这样，当导入 Menu 用于您的 Drawer 时，它会知道那里的用户上下文。

如何 link 带有抽屉路由器通量的数据容器？

How to link data container with drawer router-flux?

router

drawer

react-native

react-native-router-flux