Question

这是我的代码：

import React, {Component} from 'react';
import {
     Platform, 
     StyleSheet, 
     Text, 
     View , 
     ImageBackground } from 'react-native';
 export default class App extends Component {
 render() {
 return (
  <View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'transparent' }}>
    <ImageBackground source={{uri: "image1"}} style={{ width: null , height: null , flex: 1, resizeMode: 'cover',}} 
     >
     </ImageBackground>

</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,
 },
});

当我在模拟器中尝试此操作时，一切正常，但在我的设备上图片未显示

Emulator Files tree

为什么会这样？ :(请帮助。

Answer 1

您可以尝试将图像放置在项目根目录的资产文件夹中，然后可以使用require方法引用它，然后路径将相对于组件位置。

source = {require（'../ assets / image1.jpg'）}

这样，您还可以放置以下不同分辨率的文件：

image1.png
image1@2x.png
image1@3x.png
image1@4x.png

在该文件夹中，RN将相应加载。

Answer 2

此处的uri非常重要。在模拟器中而不是在设备上显示的图像似乎正在处理您在应用程序中上传的图像？（与您在项目或网络映像中包含的静态映像相反）。在仿真器上，存储路径与设备上的存储路径不同，因此必须确保您使用的uri可根据环境正确指向图像。希望有帮助！

Answer 3

首先在终端中进入项目路径，然后运行此命令

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android / app / src / main / assets / index.android.bundle --assets-dest android / app / src / main / res

然后在android设备上运行。希望它能起作用。

React-native：图片未在Android设备中显示；但在模拟器中显示

3 个答案: