React Native中如何导出导入用户ID？求实现实例

我来帮你搞定这个问题！你现在的核心需求是在LoginScreen通过API拿到用户ID后，把这个ID传到HomeScreen使用，甚至能持久化保存避免重复登录。下面给你两种实用的实现方案，从简单的导航传参开始，再到更稳定的本地存储方案，一步步来改代码：

方法一：通过导航参数直接传递ID #

这种方式适合登录后直接跳转目标页面的场景，操作最简单：

1. 修改LoginScreen的登录逻辑，跳转时携带ID #

在你的_userLogin方法里，当成功获取到responseData后，把用户ID作为参数传到下一个页面：

_userLogin() {
  let email = this.state.email;
  let password = this.state.password;
  if (email && password) {
    fetch("https://URL/api/login", {
      method: "POST",
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: email, password: password, })
    })
    .then((response) => {
      if(response.status !== 200) {
        throw new Error('The given data was invalid.')
      }
      return response.json();
    })
    .then((responseData) => {
      this.renderResults(responseData)
      console.log(responseData)
      // 关键：跳转时携带用户ID参数
      this.props.navigation.navigate('IntroScreen', { userId: responseData.id });
    })
    .catch((err) => console.log(err.message))
  }
}

如果是在componentDidMount里获取的ID，也可以先存到state再传递：

componentDidMount () {
  fetch("https://URL/api/login", { method: "GET", })
  .then((response) => response.json())
  .then((responseJson) => {
    const userId = responseJson.data.id;
    this.setState({ getId: responseJson, id: userId });
    console.log(userId);
    // 跳转时传参
    this.props.navigation.navigate('IntroScreen', { userId });
  })
  .catch((error) => { console.error(error); });
}

2. 在HomeScreen中接收并使用ID #

修改HomeScreen的构造函数，从导航参数里取出ID，同时设置默认值兜底：

class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentDate: new Date(),
      markedDate: moment(new Date()).format("YYYY-MM-DD"),
      isLoading: true,
      id: this.props.route.params?.userId || 1, // 用可选链避免参数不存在时报错
      name: '',
      floor: 0
    };
  }

  // 之后你就可以在组件里通过this.state.id使用这个ID了
  render() {
    return (
      // 示例：显示用户ID
      <Text>当前用户ID：{this.state.id}</Text>
    )
  }
}

方法二：本地持久化存储（推荐） #

导航传参只能在跳转时生效，如果用户退出APP再打开，或者直接进入HomeScreen就拿不到ID了。推荐用AsyncStorage把ID存在本地，这样每次打开APP都能获取到：

1. 安装AsyncStorage（React Native 0.60+需要） #

npm install @react-native-async-storage/async-storage
# 或者用yarn
yarn add @react-native-async-storage/async-storage

2. 在LoginScreen中保存ID到本地 #

在获取到用户ID的地方（登录成功或componentDidMount），把ID存到本地：

// 先导入AsyncStorage
import AsyncStorage from '@react-native-async-storage/async-storage';

// 在登录成功的回调里
.then((responseData) => {
  this.renderResults(responseData)
  console.log(responseData)
  // 保存ID到本地（注意要转成字符串存储）
  AsyncStorage.setItem('userId', responseData.id.toString());
  this.props.navigation.navigate('IntroScreen');
})

// 或者在componentDidMount里
.then((responseJson) => {
  const userId = responseJson.data.id;
  this.setState({ getId: responseJson, id: userId });
  console.log(userId);
  AsyncStorage.setItem('userId', userId.toString());
})

3. 在HomeScreen中读取本地存储的ID #

修改HomeScreen，在组件挂载时读取本地ID，同时处理未登录的情况：

import AsyncStorage from '@react-native-async-storage/async-storage';
import moment from 'moment';
import { ActivityIndicator, View, Text } from 'react-native';

class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentDate: new Date(),
      markedDate: moment(new Date()).format("YYYY-MM-DD"),
      isLoading: true,
      id: 1,
      name: '',
      floor: 0
    };
  }

  componentDidMount() {
    this.loadUserId();
  }

  loadUserId = async () => {
    try {
      // 从本地读取ID
      const userId = await AsyncStorage.getItem('userId');
      if (!userId) {
        // 没有ID说明用户未登录，跳转到登录页
        this.props.navigation.navigate('LoginScreen');
        return;
      }
      // 更新state里的ID
      this.setState({ id: parseInt(userId) });
    } catch (error) {
      console.error('读取用户ID失败:', error);
      this.props.navigation.navigate('LoginScreen');
    } finally {
      this.setState({ isLoading: false });
    }
  }

  render() {
    if (this.state.isLoading) {
      return <ActivityIndicator size="large" />; // 加载中提示
    }
    return (
      <View>
        <Text>当前用户ID：{this.state.id}</Text>
        {/* 其他组件内容 */}
      </View>
    )
  }
}

注意事项 #

• 如果你的导航流程是Login → Intro → Home，要么在IntroScreen里把参数再传给HomeScreen，要么直接从本地读取ID更省心。
• 记得处理API返回的异常情况，比如ID不存在的场景，避免程序报错。
• AsyncStorage只能存储字符串，所以取出ID后要转成数字（如果ID是数字类型）。

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