英文:
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 'react-native';
import React from 'react';
export default function SplashScreen() {
return (
<ImageBackground
source={require('../../assets/bg1.jpg')}
resizeMode={'cover'}
style={{flex: 1}}>
</ImageBackground>
);
}
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('../../screens/bg1.jpg')}
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.
答案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("message", 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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论