React Native Android端背景图片导航后消失问题求助

我之前在使用react-navigation搭配ImageBackground时也碰到过完全一样的问题——首次进入页面图片显示正常，但是导航切换后再回来就加载不出来了。下面是几个亲测有效的解决思路：

1. 提前将图片资源赋值给变量，避免动态require解析异常 #

React Native里require是静态解析的，导航切换后动态路径的require偶尔会出现解析问题。可以提前把图片资源赋值给变量，再传入source：

import React from 'react';
import { View, ImageBackground } from 'react-native';

// 提前导入图片资源
const BackgroundImage = require('../../res/images/image.png');

const YourScreen = () => {
  return (
    <View style={{ position: 'absolute', top: STATUSBAR_HEIGHT, bottom: 0, left: 0, right: 0 }}>
      <ImageBackground 
        style={{ flex: 1 }} 
        resizeMode='stretch' 
        source={BackgroundImage}
      >
        {/* 子组件内容 */}
      </ImageBackground>
    </View>
  );
};

export default YourScreen;

2. 给ImageBackground添加唯一key，强制组件重新渲染 #

react-navigation会缓存页面，导致组件可能不会重新挂载。添加和页面导航状态绑定的key，能让页面切换回来时强制ImageBackground重新渲染：

const YourScreen = ({ navigation }) => {
  return (
    <View style={{ position: 'absolute', top: STATUSBAR_HEIGHT, bottom: 0, left: 0, right: 0 }}>
      <ImageBackground 
        key={navigation.state?.key} // 绑定导航页面的唯一标识
        style={{ flex: 1 }} 
        resizeMode='stretch' 
        source={require('../../res/images/image.png')}
      >
        {/* 子组件内容 */}
      </ImageBackground>
    </View>
  );
};

3. 使用useFocusEffect监听页面焦点，触发图片重新加载 #

利用react-navigation提供的useFocusEffect钩子，在页面获得焦点时触发组件更新，确保图片重新加载：

import React, { useState } from 'react';
import { View, ImageBackground } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';

const YourScreen = () => {
  const [refreshKey, setRefreshKey] = useState(0);

  // 页面获得焦点时，更新key触发组件重新渲染
  useFocusEffect(
    React.useCallback(() => {
      setRefreshKey(prev => prev + 1);
    }, [])
  );

  return (
    <View style={{ position: 'absolute', top: STATUSBAR_HEIGHT, bottom: 0, left: 0, right: 0 }}>
      <ImageBackground 
        key={refreshKey}
        style={{ flex: 1 }} 
        resizeMode='stretch' 
        source={require('../../res/images/image.png')}
      >
        {/* 子组件内容 */}
      </ImageBackground>
    </View>
  );
};

4. 预加载图片资源 #

可以在组件挂载或页面聚焦时，用Image.prefetch预加载图片，确保资源已缓存：

import React from 'react';
import { View, ImageBackground, Image } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';

const bgImage = require('../../res/images/image.png');

const YourScreen = () => {
  // 页面聚焦时预加载图片
  useFocusEffect(
    React.useCallback(() => {
      Image.prefetch(bgImage.uri);
    }, [])
  );

  return (
    <View style={{ position: 'absolute', top: STATUSBAR_HEIGHT, bottom: 0, left: 0, right: 0 }}>
      <ImageBackground 
        style={{ flex: 1 }} 
        resizeMode='stretch' 
        source={bgImage}
      >
        {/* 子组件内容 */}
      </ImageBackground>
    </View>
  );
};

一般前两个方案就能解决大部分情况，如果还是不行可以试试后面的方法。

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