Javascript 将道具传递给抽屉内容组件

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

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},
  },

import { Drawer } from './routes';

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

常量导航项=[
{
姓名：'家'，
导航：'classesnew'，
},
{
名称：'Device'，
导航：'开始'，
},
]
const mapDispatchToProps=（调度）=>(
{
loadInitialData:（）=>调度（loadInitialData（）），
}
);
const mapStateToProps=createStructuredSelector({
user:selectUser（），//获取要显示在下面的用户名
});
类DrawerContent扩展了React.Component{
建造师（道具）{
超级（道具）
}
render（）{
返回(
{user.get（'name'）}{/*显示用户名*/}
{
navitems.map（（l，i）=>{
返回(
{
this.props.navigation.navigate（左导航）
}
}>
{l.name}
)
})
}
)
}
}
常数抽屉=(
{
Main:{屏幕：应用程序，标题：'Main'}，
设备：{屏幕：设备，标题：'Device'}，
})
const Drawer=付款人发票人{
contentComponent:（{navigation}）=>，
});
抽屉.导航选项={
内容选项：{
activeBackgroundColor:“#ff5976”，
风格：{
背景颜色：'#000000'，
zIndex:100，
paddingTop:0
}
},
标题：（{state，setParams，navigate，dispatch}）=>({
可见：对，
tintColor:“#ffffff”，
标题：“LokaLocal”，
风格：{
背景颜色：“#ff5976”
},
对:(
导航（'drawerropen'）}
>
),
左：(
),
})
}
导出常量路由=StackNavigator(
{
登录：{屏幕：登录}，
仪表板：{屏幕：抽屉}，
},

index.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},
  },

import { Drawer } from './routes';

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

从“/routes”导入{Drawer}；
常量应用=（）=>(
);

我应该在哪里使用connect，以便可以使用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);

const-mapDispatchToProps=（调度）=>(
{
loadInitialData:（）=>调度（loadInitialData（）），
}
);
const mapStateToProps=createStructuredSelector({
用户：选择用户（），
});
类DrawerContent扩展了React.Component{
建造师（道具）{
超级（道具）
}
componentDidMount（）{
console.log（'props are'，this.props）；
this.props.loadInitialData（）；
}
render（）{
console.log（'props'，this.props）；
返回(
这里的用户名
{
navitems.map（（l，i）=>{
返回(
{
this.props.navigation.navigate（左导航）
}
}>
{l.name}
)
})
}
)
}
}
常数抽屉=(
{
Main:{屏幕：应用程序，标题：'Main'}，
设备：{屏幕：设备，标题：'Device'}，
})
导出常数抽屉=抽屉激活器（抽屉{
contentComponent:（{navigation}）=>，
});
const ContentDrawer=connect（mapStateToProps，mapDispatchToProps）（抽屉内容）；

尝试使用const-ContentDrawer=connect（mapstatetops，mapsdispatchtoprops）（DrawerContent），然后在抽屉组件中使用ContentDrawer而不是DrawerContent您的意思是说export-const-Drawer=DrawerNavigator（DrawerRoutes，{contentComponent:（{navigation}）=>，}）；const-ContentDrawer=connect吗（mapStateToProps、mapDispatchToProps）（付款人内容）是的，这就是我想让你测试的。关于类DroperContent extends React.Component呢？我不理解DroperContent和ContentDrawer组件之间的区别。看，组件名称将是相同的，我们正在对其使用connect，它返回一个单独的组件，该组件连接到redux状态，我们将其重命名为ContentDrawer并使用它在我们的应用程序中。让我知道它是否有效