Question

我正在使用本机使用Drawer Navigator进行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}；

const INITIAL_STATE = { 用户：{}，加载：false，错误：''，// false isAuthorized：否 };

导出默认登录名；

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

Answer 2

您可以使用props.data在要显示的组件中的任何位置使用，请尝试使用以下标题标题：props.data

Answer 3

我没有在我的DashboardScreenStack中使用mapStateToProps的存储值（该方法不起作用），而是直接从基于函数的组件中调用store.getState（）。它可以根据需要为我服务。

如何在功能组件中呈现redux存储值？

3 个答案: