React-native：圖片未在Android設備中顯示； 但在模擬器中顯示

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

當我在模擬器中嘗試此操作時，一切正常，但在我的設備上圖像未顯示

仿真器 文件樹

為什么會這樣呢？ ：（ 請幫忙。

Answer 1

您可以嘗試將圖像放在項目根目錄的資產文件夾中，然后可以使用require方法引用它，然后路徑將相對於組件位置。

源= {要求（ '../資產/ image1.jpg'）}

這樣，您還可以放置不同分辨率的文件，如下所示：

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

在該文件夾內，RN將相應加載。

Answer 2

uri在這里非常重要。 在模擬器中而不是在設備上顯示的圖像似乎正在處理您在應用程序中上傳的圖像？ （與您在項目或網絡映像中包含的靜態映像相反）。 在仿真器上，存儲路徑與設備上的存儲路徑不同，因此必須確保您使用的uri可根據環境正確指向圖像。 希望有幫助！

Answer 3

首先在終端中進入項目路徑，然后運行此命令

react-native包--platform android --dev否--entry-file index.js --bundle-output android / app / src / main / assets / index.android.bundle --assest-dest android / app / src /主/ RES

然后在android設備上運行。 希望它能工作。