使用React Native，当我尝试使用背景图像时出现错误

Question

我认为这可能与我存储图像的位置有关。它们可以在../ProjectName/img/fileName.png中找到 有什么我需要做的加载文件，以便他们可以到达？

 <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

Answer 1

我看到了你的问题。你应该在一个级别阅读你的源图像吗？

例如：

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

另外，当你想使用背景图片时，你应该使用元素是父视图吗？。

例如：

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

振作！，

PS：别忘了投票！

Answer 2

放手一搏：

假设项目中有一些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);

Answer 3

创建自定义控件并使用它非常容易。 在自定义控件中使用

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}