React Native：不进入前屏幕向其组件传递数据的方案咨询

一、修复AsyncStorage实现的渲染问题 #

你遇到的渲染问题大概率是因为AlbaranComponent没有监听AsyncStorage中的数据变化，或者获取数据的时机不对。可以通过以下方式解决：

实现步骤 #

1. 在Screen B提交表单时，将数据存入AsyncStorage：

import { AsyncStorage } from 'react-native';
import { useNavigation } from '@react-navigation/native';

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

  const handleSubmit = async () => {
    const formData = { /* 你的表单数据 */ };
    await AsyncStorage.setItem('albaran_form_data', JSON.stringify(formData));
    navigation.navigate('ScreenC');
  };

  // 表单UI及逻辑
};

2. 在AlbaranComponent中，监听屏幕聚焦状态和应用状态变化，触发数据重新获取：

import { useState, useEffect } from 'react';
import { AsyncStorage, AppState } from 'react-native';
import { useIsFocused } from '@react-navigation/native';

const AlbaranComponent = () => {
  const [albaranData, setAlbaranData] = useState(null);
  const isFocused = useIsFocused();

  const fetchAlbaranData = async () => {
    const storedData = await AsyncStorage.getItem('albaran_form_data');
    if (storedData) {
      setAlbaranData(JSON.parse(storedData));
      // 可选：获取后删除存储，避免重复加载
      await AsyncStorage.removeItem('albaran_form_data');
    }
  };

  useEffect(() => {
    // 当Screen A被聚焦时，拉取最新数据
    if (isFocused) {
      fetchAlbaranData();
    }

    // 监听应用从后台回到前台的状态，确保数据同步
    const appStateListener = AppState.addEventListener('change', (nextState) => {
      if (nextState === 'active' && isFocused) {
        fetchAlbaranData();
      }
    });

    return () => {
      appStateListener.remove();
    };
  }, [isFocused]);

  // 组件渲染逻辑
};

二、更优实现方式 #

1. 利用React Navigation的路由参数更新 #

无需持久化数据，直接通过导航栈更新前序Screen A的路由参数，AlbaranComponent监听参数变化即可：

实现代码

• Screen B中更新Screen A的参数并跳转：

import { useNavigation } from '@react-navigation/native';

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

  const handleSubmit = () => {
    const formData = { /* 表单数据 */ };
    // 找到栈中的Screen A
    const stackRoutes = navigation.getState().routes;
    const screenAIndex = stackRoutes.findIndex(route => route.name === 'ScreenA');
    
    if (screenAIndex !== -1) {
      // 更新Screen A的路由参数
      navigation.setParams({ index: screenAIndex, albaranData: formData });
    }

    navigation.navigate('ScreenC');
  };

  // 表单UI及逻辑
};

• AlbaranComponent中监听路由参数变化：

import { useState, useEffect } from 'react';
import { useRoute } from '@react-navigation/native';

const AlbaranComponent = () => {
  const route = useRoute();
  const [albaranData, setAlbaranData] = useState(route.params?.albaranData || null);

  useEffect(() => {
    if (route.params?.albaranData) {
      setAlbaranData(route.params.albaranData);
    }
  }, [route.params]);

  // 组件渲染逻辑
};

2. 全局状态管理（Context API/Redux） #

如果你的应用中有多处需要共享这类数据，推荐使用全局状态管理方案，以Context API为例：

实现代码

• 创建全局Context：

// AlbaranContext.js
import { createContext, useContext, useState } from 'react';

const AlbaranContext = createContext();

export const AlbaranProvider = ({ children }) => {
  const [albaranData, setAlbaranData] = useState(null);

  const updateAlbaranData = (data) => {
    setAlbaranData(data);
  };

  return (
    <AlbaranContext.Provider value={{ albaranData, updateAlbaranData }}>
      {children}
    </AlbaranContext.Provider>
  );
};

export const useAlbaran = () => useContext(AlbaranContext);

• 在App入口用Provider包裹导航组件：

// App.js
import { NavigationContainer } from '@react-navigation/native';
import { AlbaranProvider } from './AlbaranContext';
// 导入你的导航栈

export default function App() {
  return (
    <AlbaranProvider>
      <NavigationContainer>
        {/* 你的导航栈组件 */}
      </NavigationContainer>
    </AlbaranProvider>
  );
}

• Screen B中更新全局状态：

import { useAlbaran } from './AlbaranContext';
import { useNavigation } from '@react-navigation/native';

const ScreenB = () => {
  const { updateAlbaranData } = useAlbaran();
  const navigation = useNavigation();

  const handleSubmit = () => {
    const formData = { /* 表单数据 */ };
    updateAlbaranData(formData);
    navigation.navigate('ScreenC');
  };

  // 表单UI及逻辑
};

• AlbaranComponent中直接使用全局状态：

import { useAlbaran } from './AlbaranContext';

const AlbaranComponent = () => {
  const { albaranData } = useAlbaran();

  // 直接使用albaranData渲染，状态变化时自动更新组件
};

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