将props传递给DrawerContent组件

Question

我想将道具传递给抽屉，以便我可以在抽屉组件中显示用户名。如果我导出DrawerContent，我不会得到导航等道具。

routes.js

const navitems =[
    {
      name:'Home',
      nav:'classesnew',
    },
    {
      name:'Device',
      nav:'start',
    },
]

const mapDispatchToProps = (dispatch) => (
  {
    loadInitialData: () => dispatch(loadInitialData()),
  }
);

const mapStateToProps = createStructuredSelector({
  user: selectUser(), // fetch the name of user to show below
});


class DrawerContent extends React.Component{
  constructor(props) {
    super(props)
  }
  render(){
    return  (
      <Image source={require('../images/logo.png')}
      style={styles.container}>
              <View style={{justifyContent: 'center',
              alignItems: 'center',}}>
                <Image style={styles.image} source={{uri: ''}}/>
                <Text>{user.get('name')}</Text> {/* show username */}
              </View>
              <View>
              {
                  navitems.map((l,i)=>{
                    return (
                      <TouchableOpacity
                          key={i}
                          style={{marginBottom:0.5}}
                          onPress={()=>{
                                        this.props.navigation.navigate(l.nav)
                                        }
                      }>
                        <View style={{flexDirection:'row', padding: 15, paddingLeft:0, backgroundColor:'#fff0', borderTopWidth:0.5, borderColor:'rgba(255,255,255, 0.5)', marginLeft: 20, marginRight:20}}>
                          <Icon name={l.icon} size={20} style={{paddingLeft:10, paddingRight: 20, height: 25,  }} color="#ffffff" />
                          <Text style={{fontSize:16, fontWeight: 'bold',color:'#fff'}}>{l.name}</Text>
                        </View>
                      </TouchableOpacity>)
                  })
              }
              </View>
          </Image>)
  }
}

const DrawerRoutes = (
  {
      Main: { screen: App, title: 'Main' },
      Device: { screen: Device, title: 'Device' },
  })

const Drawer = DrawerNavigator(DrawerRoutes ,{
  contentComponent:({navigation})=> <DrawerContent navigation={navigation} routes={DrawerRoutes} />,
});


Drawer.navigationOptions = {

  contentOptions: {
    activeBackgroundColor: '#ff5976',
    style: {
      backgroundColor: '#000000',
      zIndex: 100,
      paddingTop: 0
    }
  },
  header: ({ state, setParams, navigate, dispatch })  => ({
    visible: true,
    tintColor: '#ffffff',
    title: "LokaLocal",
    style: {
      backgroundColor: '#ff5976'
    },
    right: (
        <TouchableOpacity
          onPress={() => navigate('DrawerOpen')}
        >
          <Icon name="search" size={16} style={{ padding: 10, paddingRight: 20 }} color="#ffffff" />
        </TouchableOpacity>
      ),
    left: (
        <TouchableOpacity
          onPress={}
        >
          <Icon name="bars" size={16} style={{ padding: 10, paddingLeft: 20 }} color="#ffffff" />
        </TouchableOpacity>
      ),
  })
}


export const Routes = StackNavigator(
  {
    Login: { screen: Login },
    Dashboard: {screen: Drawer},
  },

index.js

import { Drawer } from './routes';

const App = () => (
  <Provider store={store}>
    <Drawer />
  </Provider>
);

我应该在哪里使用连接，所以我可以使用redux状态作为道具来显示用户名？

已更新

const mapDispatchToProps = (dispatch) => (
  {
    loadInitialData: () => dispatch(loadInitialData()),
  }
);

const mapStateToProps = createStructuredSelector({
  user: selectUser(),
});


class DrawerContent extends React.Component{
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    console.log('props are', this.props);
      this.props.loadInitialData();
  }

  render() {
    console.log('props', this.props);
    return  (
              <View style={styles.container}>
                <View>
                  <Image style={styles.image} source={require('../images/logo.png')}/>
                  <Text style={{ color: '#fff', fontSize: 11, paddingTop: 10, paddingBottom: 20 }}>username here</Text>
                </View>
              <View>
              {
                  navitems.map((l,i)=>{
                    return (
                      <TouchableOpacity
                          key={i}
                          style={{marginBottom:0.5}}
                          onPress={()=>{
                                        this.props.navigation.navigate(l.nav)
                                        }
                      }>
                        <View style={{flexDirection:'row', padding: 15, paddingLeft:0, borderTopWidth:0.5, borderColor:'rgba(255,255,255, 0.5)',}}>
                          <Icon name={l.icon} size={20} style={{paddingLeft:10, paddingRight: 20, height: 25,  }} color="#ffffff" />
                          <Text style={{fontSize:16, fontWeight: 'bold',color:'#fff'}}>{l.name}</Text>
                        </View>
                      </TouchableOpacity>)
                  })
              }
              </View>
            </View>
            )
  }
}

const DrawerRoutes = (
  {
      Main: { screen: App, title: 'Main' },
      Device: { screen: Device, title: 'Device' },
  })

export const Drawer = DrawerNavigator(DrawerRoutes ,{
  contentComponent:({navigation})=> <ContentDrawer navigation={navigation} routes={DrawerRoutes} />,
});

const ContentDrawer = connect(mapStateToProps, mapDispatchToProps)(DrawerContent);