使用React Native時，當我嘗試使用背景圖像時出現錯誤

我認爲這可能與我存儲圖像的位置有關。他們可以在../ProjectName/img/fileName.png 找到我有什麼需要做的加載文件，以便他們可以達成？使用React Native時，當我嘗試使用背景圖像時出現錯誤

<View style={styles.container}> 
       <HomeHeaderTitle isHomePage={true}/> 
       <View style={styles.quoteContainer}> 
        <Image source={require('../../img/backgroundQuote3.png')} /> 
       </View> 
      </View>

當我在上面添加到我的代碼，它給了我這個錯誤：

react-native-cli: 2.0.1 
react-native: 0.39.0

來源

2017-01-12 user2026178

您是否嘗試重新啓動打包程序？ –

@NaderDabit是的，我有：/ – user2026178

你可以顯示目錄結構嗎？你得到這個錯誤是因爲你很可能指向一個不存在的文件。 – Ajackster

我看到了你的問題。你應該在一個層次上閱讀你的源圖像嗎？

例如：

<Image source={require('../img/backgroundQuote3.png')} />

此外，當你想使用背景圖片，您應該使用元素是父視圖？

例如：

<Image source={require('../img/backgroundQuote3.png')}> 
    <View> 
    </View> 
</Image>

歡呼！

PS：不要忘記投票！

來源

2017-01-13 03:52:28 johnny

這給一展身手：

假設你有一些JS文件一個項目：

project/src/components/someComponent.js

與路徑

project/src/static/someStatic.png

導入一些靜態文件，並使用它像這樣：

import someStatic from 'project/src/static/someStatic.png' 
... 
<Image source={someStatic} />

這消除了../..歧義的相對尋址。

只是確保該項目的名稱是一樣的註冊名稱

AppRegistry.registerComponent('project',() => App);

來源

2017-01-13 02:42:59

但是，我認爲@ Johnny的解決方案更爲標準。 – user2026178

在react-native完全控制javascript環境的情況下，我認爲使用導入不僅僅是可以接受的。如果是尋址，則有一種已知的方法，您可以將package.json文件添加到組件/靜態文件夾以便能夠按名稱引用它們。您不希望進行相對尋址的原因是佈局組件亂七八糟。它們被重新組織到子文件夾中，或被移入不同的類別。組件和靜態文件通常保持在原來的位置。 –

創建自定義控件並使用它非常容易。自定義控制使用

import React from 'react' 
import { View } from 'react-native' 

const ParentView = (props) => { 
    return (
    <Image source={require('../img/background_image.png')}> 
     {props.children} 
    </Image> 
); 
}; 
export {ParentView}

來源

2017-06-24 05:54:29

使用React Native時，當我嘗試使用背景圖像時出現錯誤

回答

相關問題