React Native中如何在登录后页面展示用户users_ID

你当前的核心问题是：登录成功后获取到的users_ID没有正确传递到EditFamily页面。从代码看，登录页调用了this.props.setLoggedIn但没有后续的参数传递逻辑，也没看到路由跳转的具体实现，导致目标页面拿不到数据。下面提供两种最常用的解决方式：

方式一：路由跳转时直接传递参数（适合简单场景） #

假设你使用React Navigation（React Native最常用路由库），按以下步骤修改：

1. 修改登录页的登录成功逻辑 #

替换原handleLoginPress中登录成功的代码，改为导航跳转并携带users_ID：

handleLoginPress = async () => {
  const { users_username, users_password } = this.state;

  try {
    let response = await fetch('http://IP/CodingApp/login.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        users_username,
        users_password,
      }),
    });

    let responseJson = await response.json();
    console.log(responseJson);
    if (responseJson.loggedin) {
      // 导航到EditFamily并传递users_ID参数
      this.props.navigation.navigate('EditFamily', { users_ID: responseJson.users_ID });
      this.setState({ users_ID: responseJson.users_ID });
    } else {
      this.setState({ response: '用户名或密码错误' });
    }
  } catch (error) {
    console.error(error);
  }
};

2. 修改EditFamily页面接收参数 #

根据React Navigation版本不同，参数获取方式略有区别：

• React Navigation v5+（函数组件）：

import React from 'react';
import { View, Text } from 'react-native';

const EditFamily = ({ route }) => {
  // 从route.params中取出传递的users_ID
  const { users_ID } = route.params;
  return (
    <View>
      <Text>你的用户ID是: {users_ID}</Text>
    </View>
  );
};

export default EditFamily;

• 旧版本React Navigation：

import React from 'react';
import { View, Text } from 'react-native';

const EditFamily = (props) => {
  // 使用getParam获取参数，第二个参数是默认值（可选）
  const users_ID = props.navigation.getParam('users_ID', '未获取到ID');
  return (
    <View>
      <Text>你的用户ID是: {users_ID}</Text>
    </View>
  );
};

export default EditFamily;

注意事项 #

如果登录页不在导航栈中，需要用withNavigation高阶组件包裹登录页，确保能拿到navigation props：

import { withNavigation } from 'react-navigation';

class LoginScreen extends React.Component {
  // 原登录页代码
}

export default withNavigation(LoginScreen);

方式二：全局状态管理（适合多页面共享用户信息的场景） #

如果你的应用需要在多个页面使用用户ID，推荐用Context或Redux管理全局状态，这里以Context为例：

1. 创建AuthContext #

新建AuthContext.js文件：

import React, { createContext, useState } from 'react';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  // 定义登录方法，存储用户信息
  const login = (userData) => {
    setUser(userData);
  };

  return (
    <AuthContext.Provider value={{ user, login }}>
      {children}
    </AuthContext.Provider>
  );
};

2. 在App入口包裹组件 #

修改App.js，用AuthProvider包裹导航容器：

import { AuthProvider } from './AuthContext';
import { NavigationContainer } from '@react-navigation/native';
// 其他必要导入

export default function App() {
  return (
    <AuthProvider>
      <NavigationContainer>
        {/* 你的导航栈配置 */}
      </NavigationContainer>
    </AuthProvider>
  );
}

3. 登录页调用全局登录方法 #

import { AuthContext } from './AuthContext';

class LoginScreen extends React.Component {
  static contextType = AuthContext;

  handleLoginPress = async () => {
    // 原请求逻辑不变
    if (responseJson.loggedin) {
      // 将用户ID存入全局状态
      this.context.login({ users_ID: responseJson.users_ID });
      this.props.navigation.navigate('EditFamily');
    }
  };
}

4. EditFamily页面从全局状态获取ID #

import React, { useContext } from 'react';
import { View, Text } from 'react-native';
import { AuthContext } from './AuthContext';

const EditFamily = () => {
  const { user } = useContext(AuthContext);
  return (
    <View>
      <Text>你的用户ID是: {user?.users_ID}</Text>
    </View>
  );
};

export default EditFamily;

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