React Native导航后Context状态image变为undefined问题求助

核心问题分析 #

• Context Provider 作用域错误：MediaContextProvider被嵌套在CameraPreview的isFocused && (...)条件渲染内部，导航离开时isFocused变为false，整个Provider所在的DOM树被卸载，Context内的image状态直接被销毁。
• 条件渲染导致组件全卸载：CameraPreview用isFocused直接控制整个Camera组件的渲染，导航时组件完全卸载，不仅丢失Context状态，还会重置CameraControls里的cameraState本地状态。
• MediaContext 代码bug：原Provider组件错误地递归渲染自身，会触发无限循环（虽未直接表现，但必须修复）。

修复步骤 #

1. 提升MediaContextProvider的作用域 #

把Provider移到导航容器外层，确保它在整个App生命周期内持续存在，不受单个屏幕的聚焦状态影响。

修改App入口文件（如App.js）：

import { MediaContextProvider } from './path/to/MediaContext';
import { AppStack } from './path/to/AppStack';

export default function App() {
  return (
    <MediaContextProvider>
      <AppStack />
    </MediaContextProvider>
  );
}

同时删除CameraPreview内的MediaContextProvider：

// CameraPreview.js
return (
  <Camera
    cameraRef={cameraRef}
    cameraType={cameraType}
    flashMode={flashMode}
    onCameraReady={() => setIsCameraReady(true)}>
    {/* 移除此处的MediaContextProvider */}
    <CameraControls
      isCameraReady={isCameraReady}
      onToggleCamera={toggleCamera}
      setFlashMode={setFlashMode}
      cameraRef={cameraRef}
      onDismiss={() => navigation?.goBack()}
    />
  </Camera>
);

2. 替换isFocused && (...)的粗暴卸载逻辑 #

不要直接卸载Camera组件，改用样式控制显隐，配合useFocusEffect处理相机的暂停/恢复：

// CameraPreview.js
import { useFocusEffect } from '@react-navigation/native';

const CameraPreview = ({ navigation }) => {
  const isFocused = useIsFocused();
  const cameraRef = React.useRef<ExpoCamera>(null);
  const [isCameraReady, setIsCameraReady] = useState(false);
  const [cameraType, setCameraType] = useState(CameraType.back);

  // 聚焦时恢复预览，失焦时暂停，避免组件卸载
  useFocusEffect(
    React.useCallback(() => {
      if (cameraRef.current && isCameraReady) {
        cameraRef.current.resumePreview();
      }
      return () => {
        if (cameraRef.current) {
          cameraRef.current.pausePreview();
        }
      };
    }, [isCameraReady])
  );

  return (
    // 用opacity控制显隐，保留组件实例
    <View style={{ 
      opacity: isFocused ? 1 : 0, 
      position: 'absolute', 
      width: '100%', 
      height: '100%' 
    }}>
      <Camera
        cameraRef={cameraRef}
        cameraType={cameraType}
        flashMode={flashMode}
        onCameraReady={() => setIsCameraReady(true)}>
        <CameraControls
          isCameraReady={isCameraReady}
          onToggleCamera={toggleCamera}
          setFlashMode={setFlashMode}
          cameraRef={cameraRef}
          onDismiss={() => navigation?.goBack()}
        />
      </Camera>
    </View>
  );
};

3. 修复MediaContext的递归渲染bug #

原Provider错误地渲染自身，必须改为使用MediaContext.Provider：

// MediaContext.js
const MediaContext = createContext({
  image: undefined,
  setImage: () => {},
});

const MediaContextProvider = ({ children }) => {
  const [image, setImage] = useState<Partial<PickerImage>>();
  
  return (
    // 改为MediaContext.Provider，而非自身
    <MediaContext.Provider value={{ image, setImage }}>
      {children}
    </MediaContext.Provider>
  );
};

export const useMedia = () => {
  const context = useContext(MediaContext);
  const setImageAndUpdateSize = (capturedImage) => {
    const { setImage } = context;
    return setImage(capturedImage);
  };

  return {
    ...context,
    setImageAndUpdateSize,
  };
};

额外优化建议 #

• 如果cameraState需要在导航后保持，可将其移到Context中，或用useFocusEffect在组件重新聚焦时恢复状态。
• 相机组件频繁卸载/挂载会影响性能，尽量用显隐控制替代卸载逻辑。

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