React Native为什么无法在资产文件夹中找到图像?

huangapple go评论66阅读模式
英文:

Why react native can`t find image in assets folder?

问题

我在src/assets文件夹中有一个背景图像我尝试从src/screens/splash/index.js中获取访问权限代码如下

    import {ImageBackground} from 'react-native';
    import React from 'react';
    
    export default function SplashScreen() {
      return (
        <ImageBackground
          source={require('../../assets/bg1.jpg')}
          resizeMode={'cover'}
          style={{flex: 1}}>
        </ImageBackground>
      );
    }

出现以下错误

找不到以下文件
  * bg1.jpg
  * src\assets\bg1.jpg\index(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)

如果我将图像移动到任何其他文件夹例如screens并将source更改为

    source={require('../../screens/bg1.jpg')}

它可以正常工作
我感到困惑并想知道背后的原因
可能是因为我使用了react-native cli并将最初创建的tsx文件重命名为js吗
以下是一张图片或许有助于理解问题
英文:

I have a background image in src/assets folder which I try to get access to from src/screens/splash/index.js as such:

import {ImageBackground} from &#39;react-native&#39;;
import React from &#39;react&#39;;

export default function SplashScreen() {
  return (
    &lt;ImageBackground
      source={require(&#39;../../assets/bg1.jpg&#39;)}
      resizeMode={&#39;cover&#39;}
      style={{flex: 1}}&gt;
    &lt;/ImageBackground&gt;
  );
}

Returns this error:

None of these files exist:

  • bg1.jpg
  • src\assets\bg1.jpg\index(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)

If i move the image in any other folder, for example screens and change source to:

source={require(&#39;../../screens/bg1.jpg&#39;)} 

its working fine.
Im baffled and wondering the reason behind it?
Is it maybe because I use react-native cli and renamed the tsx file created originally to js?
Here is a picture in case it helps understanding the problem.

React Native为什么无法在资产文件夹中找到图像?

答案1

得分: 0

经过尝试评论中建议的一切,到目前为止都没有起作用。我继续构建应用程序(按照教程),并在另一台计算机上重新编译了应用程序,现在它开始工作了!

自从添加了资产文件夹和遵循文档与Android片段集成后,我唯一做出的更改是根据建议在MainActivity.java中添加了一些额外的行。

import android.os.Bundle;

以及

private Bundle getLaunchOptions(String message) {
    Bundle initialProperties = new Bundle();
    initialProperties.putString("message", message);
    return initialProperties;
}

现在我并不百分之百确定这是否是问题的解决方案,但我假设它必须是,因为自从错误消息出现以来,代码没有进行任何其他更改。

另外,也有可能在我的其他计算机上仍然无法工作,因此错误可能根源于我的计算机如何处理这些包。不幸的是,我无法在接下来的两周内测试这个理论,但无论结论如何,我都会分享出来。

英文:

After trying everyting was suggested in the comments, nothing has worked so far. I went ahead and continue building the app (following a tutorial) and re-compiled the application, now on an other computer and it started working!

The only change that I made since added the assets folder and the image that following the documentation integration-with-android-fragment I added few extra lines to MainActivity.java as suggested.

import android.os.Bundle;

and

  private Bundle getLaunchOptions(String message) {
    Bundle initialProperties = new Bundle();
    initialProperties.putString(&quot;message&quot;, message);
    return initialProperties;
}

Now im not 100% sure this was the solution to the problem, but I assume it must have been as no other changes has been made to the code since the error message appeared..

That is also possible that on my other computer it still wouldnt work, so the error is rooted somewhere within how my computer handeled these packadges. Unfortunately Im unable to test this theory for the next 2 weeks, but will share it whatever it concludes.

huangapple
  • 本文由 发表于 2023年2月19日 20:27:00
  • 转载请务必保留本文链接:https://go.coder-hub.com/75500136.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定