React-native:图像未显示在 android 设备中;但在模拟器中完美显示
Posted
技术标签:
【中文标题】React-native:图像未显示在 android 设备中;但在模拟器中完美显示【英文标题】:React-native: Images not showing in android device; but shows perfectly in emulator 【发布时间】:2017-01-16 01:02:46 【问题描述】:我正在开发一个示例反应原生项目。除了<Image source=''/>
之外,几乎所有功能都可以很好地使用它。该图像在 android studio 和 genymotion 提供的 android 模拟器中显示良好,但不适用于任何真实设备(moto G3 turbo、nexus 5、galaxy s4 等)。我不知道我的代码出了什么问题。这是我的代码
import React, Component from 'react';
import
AppRegistry,
StyleSheet,
Text,
View,
Image
from 'react-native';
class ImageTester extends Component
render()
return (
<View style=styles.container>
<Text style=styles.welcome>
Welcome to React Native!
</Text>
<Text style=styles.instructions>
To get started, edit index.android.js
</Text>
<Text style=styles.instructions>
Double tap R on your keyboard to reload,'\n'
Shake or press menu button for dev menu
</Text>
<Image source=require('./img/first_image.png')></Image>
</View>
);
const styles = StyleSheet.create(
container:
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
,
welcome:
fontSize: 20,
textAlign: 'center',
margin: 10,
,
instructions:
textAlign: 'center',
color: '#333333',
marginBottom: 5,
,
);
AppRegistry.registerComponent('ImageTester', () => ImageTester);
项目结构:
反应原生版本:反应原生:0.32.1
【问题讨论】:
这里是答案:***.com/questions/35567502/… @luwu 我已经经历过了。它对我不起作用。 @luwu 你是对的。问题出在 bundle 打包命令上。我已经解决了。我将其发布在下面作为自我回答。感谢您的所有帮助。:-) 你需要设置width
, height
of Image
这样的组件<Image source=require('./img/first_image.png') style= width: 100, height: 100 ></Image>
@ubatin 如果您使用的是本地图像,则不需要指定图像尺寸。看看这些例子:-facebook.github.io/react-native/releases/0.33/docs/image.html
【参考方案1】:
问题出在我的打包命令上。正如@luwu 在他的评论中所说,我检查了this,并惊讶于与我的没有区别。然后只有我在运行命令时注意到一条消息
“资产目标文件夹未设置,正在跳过...”
这个消息有点混乱,因为 bundle 已经在 assets 文件夹中创建了。该消息中的“资产”实际上表示我的图像。我用以下命令解决了问题:
react-native bundle --platform android --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --dev false --reset-cache --assets-dest android/app/src/main/res/
【讨论】:
当我尝试生成发布版本时出现重复资源错误,然后我必须删除在 android/app/main/res 中生成的资源 如果我只是在构建文件夹中更改资产目录进行调试,那么我得到没有问题 react-native bundle --platform android --entry-file index.js --bundle-output android/app/ src/main/assets/index.android.bundle --dev false --reset-cache --assets-dest android/app/build/generated/res/react/debug【参考方案2】:针对同一问题的未捆绑在开发中的资产的另一种解决方案。
将以下行添加到您的app/build.gradle
文件的project.ext.react
部分:
project.ext.react = [
... other properties
bundleInDebug: true // <-- add this line
]
来自起始项目 gradle 文件中的文档:
默认情况下会跳过 bundleDebugJsAndAssets,因为在调试/开发模式下,我们更喜欢直接从开发服务器加载包。
【讨论】:
手动捆绑时避免重复资源问题的额外好处(如其他答案的 cmets 中突出显示的那样)。【参考方案3】:我在我的项目中遇到了类似的问题。我的问题是图像在 ios 上显示正常,但在 android(设备)上没有显示。
所以我的问题通过在我的图片中添加以下标题得到解决:
<Image
source=
uri: 'https://imageurladdress/img.png',
headers:
Accept: '*/*',
,
style=styles.imageStyle
/>
因此,由于某种原因,iOS 已经可以正常工作,而无需在请求中添加此标头。但关键是添加 headers 字段后,图像在 iOS 和 android 设备上都显示正确。
【讨论】:
【参考方案4】:我有同样的问题。原来我从 react-native-elements 而不是 rect-native 导入图像组件。修复了我的情况
【讨论】:
【参考方案5】:就我而言,有两件事导致了问题
第一
我在 http://localhost:3000
运行我的后端,任何图像资产的 URI 都类似于
http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOns
但android模拟器将其公开为
http://10.0.2.2:3000/.....
所以http://localhost:3000
在模拟器中是无法访问的。因此,我确保从后端设置了适当的主机,以查看哪个设备正在请求 API。
第二
在提供给<Image>
组件的参数中,我使用了url
key(property),它在IOS 中运行良好,但我需要将其更改为uri
for android。
【讨论】:
以上是关于React-native:图像未显示在 android 设备中;但在模拟器中完美显示的主要内容,如果未能解决你的问题,请参考以下文章
React-native node.js 显示错误:多部分:使用 react-native-image-picker 上传图像时未找到边界
react-native IOS应用程序未在模拟器中显示资产