React Native：解决将变量作为ImageBackground的source参数时的require报错

你遇到的问题是React Native的Metro打包机制限制——require()的资源路径必须是静态字符串。编译阶段Metro会提前扫描并打包所有require引用的资源，动态传递的路径字符串无法被打包器识别，所以直接调用require(pathToPNG)会触发报错。

方案一：预加载图片后传递资源引用 #

在首页直接用require()加载图片，把加载后的资源对象作为参数传递，而非路径字符串：

修改HomeScreen代码 #

function HomeScreen( {navigation}) {
    // 直接预加载图片，存资源对象而非路径字符串
    const itemList = [
      {
        id: 1,
        name: 'test1',
        image: require('./assets/foo.png')
      }
    ];

    const oneItem = ( {item} ) => (
      // 传递预加载好的image对象
      <Pressable onPress={() => navigation.navigate('Details', {id: item.id, name: item.name, image: item.image})}> 
        <Text style={{textAlign:'center', fontFamily:'Poppins-Regular', fontSize:30}}>
          {'foo-bar'}
        </Text>
      </Pressable>
    )

    return (
      <SafeAreaView>
        <FlatList style={styles.flatty}
            data = { itemList }
            renderItem = { oneItem }
        />
      </SafeAreaView>
    );
  }

修改DetailsScreen代码 #

function DetailsScreen( {route, navigation}) {
    const {id, name, image} = route.params;
    
    // 直接使用传递过来的资源对象
    return (
        <ImageBackground source={image} style={{flex: 1}} />
    )
}

方案二：创建路径-资源映射表 #

如果图片数量较多，不想在首页预加载，可以在详情页提前定义所有图片的映射关系，根据传递的路径字符串匹配资源：

修改DetailsScreen代码 #

function DetailsScreen( {route, navigation}) {
    const {id, name, pathToPNG} = route.params;
    
    // 提前定义所有可能用到的图片映射
    const imageMap = {
      './assets/foo.png': require('./assets/foo.png'),
      // 可添加更多图片路径与对应require
    };
    
    return (
        <ImageBackground source={imageMap[pathToPNG]} style={{flex: 1}} />
    )
}

注意：此方法需确保所有可能传递的路径都在映射表中，否则会出现资源找不到的问题。

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