React Native 0.62：如何在函数组件中渲染Redux Store用户名？

看起来你遇到的核心问题是：DashboardStackScreen组件没有连接到Redux Store，所以无法获取登录用户信息来动态设置headerTitle。下面给你几种可行的解决方案，按推荐程度排序：

方案1：使用Redux Hooks（useSelector）推荐 #

函数组件中最简洁的方式就是用Redux提供的useSelector Hook来直接获取Store中的数据，前提是你的组件已经被Redux Provider包裹（确保整个App在<Provider store={store}>内部）。

修改步骤： #

1. 首先在DashboardStackScreen文件中导入useSelector：

import { useSelector } from 'react-redux';

2. 在组件内部获取用户信息，然后动态设置headerTitle：

const DashboardStackScreen = ({ navigation }) => {
  // 注意：这里的state路径要和你的Redux Store结构匹配，你的reducer是login，所以取state.login.user
  const loggedInUser = useSelector(state => state.login.user);
  // 处理用户信息未加载或为空的情况，避免报错
  const userName = loggedInUser.name || 'Guest';

  return (
    <DashboardStack.Navigator 
      screenOptions={{ 
        headerTitle: `Good Morning, ${userName}`, // 这里动态插入用户名
        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>
  );
}

方案2：用connect包裹DashboardStackScreen #

如果你更习惯传统的connect方式，可以把DashboardStackScreen连接到Redux，将用户信息作为props传入：

修改步骤： #

1. 导入connect和相关依赖：

import { connect } from 'react-redux';

2. 定义mapStateToProps，把用户信息映射到props：

const DashboardStackScreen = ({ navigation, user }) => {
  const userName = user.name || 'Guest';
  return (
    <DashboardStack.Navigator 
      screenOptions={{ 
        headerTitle: `Good Morning, ${userName}`,
        // ...其他配置保持不变
      }}
    >
      <DashboardStack.Screen name="Dashboard" component={Dashboard} />
    </DashboardStack.Navigator>
  );
}

const mapStateToProps = state => {
  return { user: state.login.user }; // 同样注意state路径
};

// 用connect包裹组件
export default connect(mapStateToProps)(DashboardStackScreen);

3. 记得在MainNavigator中导入这个被connect后的DashboardStackScreen，替换原来的未连接版本。

方案3：把headerTitle做成独立的Redux连接组件 #

如果不想修改DashboardStackScreen的结构，可以把headerTitle变成一个单独的组件，让它自己从Redux获取数据：

修改步骤： #

1. 创建一个HeaderTitle组件：

import { useSelector } from 'react-redux';
import { Text } from 'react-native';

const HeaderTitle = () => {
  const user = useSelector(state => state.login.user);
  return <Text style={{ fontFamily: 'OpenSans-SemiBold', fontSize: 20, color: '#fff' }}>
    Good Morning, {user.name || 'Guest'}
  </Text>;
}

2. 在DashboardStackScreen的screenOptions中使用这个组件：

screenOptions={{ 
  headerTitle: () => <HeaderTitle />,
  // ...其他配置保持不变
}}

关键注意点 #

• 确保你的整个App已经被Redux的<Provider>包裹，比如在入口文件App.js中：

import { Provider } from 'react-redux';
import store from './path/to/your/store';

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

• 确认Redux Store的结构：你的login reducer是作为login key存在于root reducer中的，所以获取用户信息的路径是state.login.user，如果你的root reducer结构不同，要对应调整。

内容的提问来源于stack exchange，提问作者Tanu Sharma