React Native中如何跨页面调用函数？从screen_2调用screen_1内函数更新AsyncStorage数据的实现方案咨询

下面给你几种实用的实现方案，你可以根据项目的复杂度和技术栈选择：

方案1：通过导航参数传递函数（适合React Navigation等导航库场景） #

如果你的页面是用导航库跳转的，最简单的方式就是把screen_1里的更新函数作为参数传递给screen_2。这样screen_2拿到函数后就能直接调用。

举个React Navigation的例子：

在screen_1中传递函数 #

// screen_1.js
import { useNavigation } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const Screen1 = () => {
  const navigation = useNavigation();

  // 定义你的数据更新函数
  const updateStoredData = async (newData) => {
    try {
      await AsyncStorage.setItem('user_data', JSON.stringify(newData));
      console.log('数据更新成功');
      // 这里可以加一些更新后的UI逻辑，比如刷新页面数据
    } catch (err) {
      console.error('更新失败:', err);
    }
  };

  // 跳转到screen_2时把函数传过去
  const navigateToScreen2 = () => {
    navigation.navigate('Screen2', { updateData: updateStoredData });
  };

  return (
    // 你的页面UI，比如一个按钮触发navigateToScreen2
    <Button title="去Screen2" onPress={navigateToScreen2} />
  );
};

在screen_2中接收并调用函数 #

// screen_2.js
import { useRoute } from '@react-navigation/native';

const Screen2 = () => {
  const route = useRoute();
  // 从导航参数里拿到更新函数
  const { updateData } = route.params;

  // 调用更新函数的示例
  const handleUpdate = async () => {
    const newUserData = { username: '新名字', age: 25 };
    await updateData(newUserData);
    // 可以选择更新后返回screen_1
    navigation.goBack();
  };

  return (
    <Button title="更新数据" onPress={handleUpdate} />
  );
};

方案2：使用全局状态管理（适合复杂的多页面数据共享） #

如果你的项目有多个页面需要操作同一份数据，推荐把数据和更新逻辑放到全局状态里，比如用React Context、Redux或者MobX。这里用React Context举个简单的例子：

第一步：创建数据Context #

// DataContext.js
import React, { createContext, useContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const DataContext = createContext();

export const DataProvider = ({ children }) => {
  const [userData, setUserData] = useState(null);

  // 初始化从AsyncStorage加载数据
  useEffect(() => {
    const loadData = async () => {
      const storedData = await AsyncStorage.getItem('user_data');
      if (storedData) setUserData(JSON.parse(storedData));
    };
    loadData();
  }, []);

  // 全局的更新函数
  const updateUserData = async (newData) => {
    try {
      await AsyncStorage.setItem('user_data', JSON.stringify(newData));
      setUserData(newData);
    } catch (err) {
      console.error('更新全局数据失败:', err);
    }
  };

  return (
    <DataContext.Provider value={{ userData, updateUserData }}>
      {children}
    </DataContext.Provider>
  );
};

// 自定义hook方便调用
export const useData = () => useContext(DataContext);

第二步：在App根组件包裹Provider #

// App.js
import { DataProvider } from './DataContext';
import { NavigationContainer } from '@react-navigation/native';
// 导入你的屏幕组件

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

第三步：在screen_1和screen_2中调用更新函数 #

不管是screen_1还是screen_2，都可以直接用自定义hook拿到更新函数：

// screen_1.js 或者 screen_2.js
import { useData } from './DataContext';

const AnyScreen = () => {
  const { updateUserData } = useData();

  const handleUpdate = async () => {
    await updateUserData({ username: '全局更新的名字' });
  };

  return <Button title="更新数据" onPress={handleUpdate} />;
};

方案3：把更新逻辑抽成独立工具函数（最推荐的解耦方式） #

其实最好的做法是不要把更新逻辑绑定在某个页面组件里，而是把它抽成一个独立的工具函数，这样任何页面都能导入调用，完全解耦。

第一步：创建存储工具文件 #

// utils/storageUtils.js
import AsyncStorage from '@react-native-async-storage/async-storage';

// 通用的更新存储数据函数
export const updateStorageData = async (storageKey, newData) => {
  try {
    await AsyncStorage.setItem(storageKey, JSON.stringify(newData));
    return { success: true };
  } catch (err) {
    console.error(`更新${storageKey}失败:`, err);
    return { success: false, error: err };
  }
};

// 还可以加其他相关函数，比如获取数据、删除数据等
export const getStorageData = async (storageKey) => {
  try {
    const data = await AsyncStorage.getItem(storageKey);
    return data ? JSON.parse(data) : null;
  } catch (err) {
    console.error(`获取${storageKey}失败:`, err);
    return null;
  }
};

第二步：在screen_1和screen_2中使用 #

现在不管是screen_1还是screen_2，都能直接导入调用这个函数：

// screen_1.js 或者 screen_2.js
import { updateStorageData } from './utils/storageUtils';

const AnyScreen = () => {
  const handleUpdate = async () => {
    const result = await updateStorageData('user_data', { username: '工具函数更新的名字' });
    if (result.success) {
      console.log('更新成功！');
    }
  };

  return <Button title="更新数据" onPress={handleUpdate} />;
};

方案选择建议 #

• 如果只是简单的两个页面交互，用导航传参就够了；
• 如果项目有多个页面需要共享数据或操作，用全局状态管理；
• 不管项目大小，都推荐优先考虑抽成工具函数，因为它让逻辑和组件完全解耦，代码更易维护。

内容的提问来源于stack exchange，提问作者Алексей