AsyncStorage值仅在屏幕刷新时获取的问题解决求助

问题出在异步存储未完成就跳转页面：storeData是异步函数，但redirect里没有等待存储操作完成就直接调用navigation.navigate，导致跳转至DetailsScreen时，数据可能还没写入AsyncStorage。而DetailsScreen的useEffect仅在组件挂载时执行一次，自然拿不到最新数据。Expo环境下存储速度较快所以表现正常，模拟器中存储延迟更明显，问题就暴露出来了。

以下是三种可行的解决办法，按需选择：

方案1：等待存储完成后再跳转 #

修改HomeScreen中的redirect函数，确保数据写入AsyncStorage后再导航：

const redirect = async (emailAddress) => {
  await storeData(emailAddress);
  navigation.navigate('Details');
};

方案2：监听页面焦点，每次进入都获取数据 #

在DetailsScreen中监听页面focus事件，确保每次进入页面时都重新读取AsyncStorage数据，同时兼容从其他页面返回的场景：

function DetailsScreen({ navigation }) {
  const [text, setText] = React.useState('');

  React.useEffect(() => {
    const getEmail = async () => {
      try {
        const email = await AsyncStorage.getItem('email');
        if (email !== null) {
          setText(email);
        }
      } catch (e) {
        console.log(' error : ' + e);
      }
    };

    // 初始挂载时获取一次
    getEmail();
    // 监听页面焦点，每次进入都重新获取
    const unsubscribe = navigation.addListener('focus', getEmail);

    return unsubscribe;
  }, [navigation]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen : {text}</Text>
    </View>
  );
}

方案3：直接通过导航参数传递数据（推荐） #

如果只是页面间临时传值，无需依赖AsyncStorage，直接通过导航参数传递更高效：

1. 修改HomeScreen的redirect函数：

const redirect = (emailAddress) => {
  // 可选：如果需要持久化，可保留storeData调用
  // storeData(emailAddress);
  navigation.navigate('Details', { email: emailAddress });
};

2. 在DetailsScreen中直接读取参数：

function DetailsScreen({ route }) {
  // 用可选链处理参数不存在的情况
  const [text, setText] = React.useState(route.params?.email || '');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen : {text}</Text>
    </View>
  );
}

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