如何在函数组件中呈现redux存储值？

Question

我在react native 0.62上工作，我在其中使用了抽屉导航器。当用户登录到应用程序时，我将auth api响应存储到redux存储中。登录后，我想在仪表板头显示登录的用户名，但我无法使用redux存储在我的函数。用钩子试过，但不起作用。任何帮助或建议。提前谢谢你。下面是我的代码：

const GradientHeader = props => (
  <View style={{ backgroundColor: 'transparent' }}>
      <LinearGradient
        colors={['#6CCFF6', '#596AB2']}
        start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
      >
          <Header {...props} />   
      </LinearGradient>
    </View>
  ) 

const DashboardStackScreen = ({ navigation }) => {
  return (
    <DashboardStack.Navigator screenOptions={{
      headerTitle: 'Good Morning, John', // i wanted to access the redux store here 
      header: props => <GradientHeader {...props} />,     
      headerLeft: () => (
        <TouchableOpacity onPress={navigation.openDrawer} style={{padding: 20}}>
          <Image source={require('../assets/images/menu_bar.png')} style={{width:18, height:12}}/>
        </TouchableOpacity>
      ),
      headerTransparent: true,
      headerStyle: {
        backgroundColor:  'transparent' 
      },
      headerTintColor: '#fff',    
      headerTitleStyle: { fontFamily: 'OpenSans-SemiBold', fontSize: 20},
    }}>
      <DashboardStack.Screen name="Dashboard" component={Dashboard} />
    </DashboardStack.Navigator>
  );
}

const MainNavigator = ({navigation}) => {
   return (
    <Drawer.Navigator initialRouteName="Dashboard" drawerContent={(props) => <DrawerContent {...props} />} hideStatusBar={false} focused={true} labelStyle={{ fontSize: 14, fontFamily: 'OpenSans-SemiBold' }} drawerContentOptions={{ activeBackgroundColor: "#F1F1F1", activeTintColor: "#000000", inactiveTintColor: "#818181",itemStyle: { marginLeft:0, paddingHorizontal: 10, width:'100%', borderRadius: 0}}}  
   >
      <Drawer.Screen name="Dashboard" component={DashboardStackScreen} options={{
        drawerIcon: ({ focused, size }) => (
          <Image source={require('../assets/images/dashboard.png')} style={{ height: 17.78, width: 16}}  resizeMode="contain"/>
        )
      }}      
      />
    </Drawer.Navigator>
  );
}

const mapStateToProps = state => {
  return {
    data: state
  };
};
export default connect(mapStateToProps)(MainNavigator);

login.reducer.js从'../utility/constants'导入{AUTH_REQUEST,AUTH_SUCCESS,AUTH_FAILURE,SET_AUTH}；

导出默认登录；

Answer 1

如果您使用Provider连接到存储区，那么您可以使用props作为数据访问组件MainNavigator中的数据，因为您的mapStateToProps返回具有您的状态的数据。

const MainNavigator = ({navigation, data}) => {
   console.log('Redux store data', data);
   return (
    <Drawer.Navigator initialRouteName="Dashboard" drawerContent={(props) => <DrawerContent {...props} />} hideStatusBar={false} focused={true} labelStyle={{ fontSize: 14, fontFamily: 'OpenSans-SemiBold' }} drawerContentOptions={{ activeBackgroundColor: "#F1F1F1", activeTintColor: "#000000", inactiveTintColor: "#818181",itemStyle: { marginLeft:0, paddingHorizontal: 10, width:'100%', borderRadius: 0}}}  
   >
      <Drawer.Screen name="Dashboard" component={DashboardStackScreen} options={{
        drawerIcon: ({ focused, size }) => (
          <Image source={require('../assets/images/dashboard.png')} style={{ height: 17.78, width: 16}}  resizeMode="contain"/>
        )
      }}      
      />
    </Drawer.Navigator>
  );
}