Question

          <TouchableOpacity style={styles.box}>
            <ImageBackground
              source={require('../images/pic.png')}
            >
                <Icon
                  type='foundation'
                  name='dump'
                  style={styles.icon}
                />
            </ImageBackground>

            <Text style={styles.text}>
            Hello
            </Text>
          </TouchableOpacity>

嗨，我不断收到TypeError：使用imagebackground时，undefined不是对象（评估“ style.width”）错误。为什么会这样？

Answer 1

这是来自imageBackground的RN文档，它说您应该在图像背景上添加高度和宽度以使其正常工作。

请注意，您必须指定一些宽度和高度样式属性。

所以只需将代码替换为以下内容：

 <TouchableOpacity style={styles.box}>
                <ImageBackground
                  source={require('../images/pic.png')}
                  style={{width: '100%', height: '100%'}} // new addition
                >
                    <Icon
                      type='foundation'
                      name='dump'
                      style={styles.icon}
                    />
                </ImageBackground>

                <Text style={styles.text}>
                Hello
                </Text>
              </TouchableOpacity>

Answer 2

React Native文档说style组件的ImageBackground属性不是必需的。但是，似乎存在一个持续存在的问题，因为只有在您这样做包含style道具时，该问题才起作用。尝试为其发送一个值，这应该可以解决问题。

https://github.com/facebook/react-native/issues/18904

Answer 3

作为react-native ImageBackground documentation，您必须指定一些宽度和高度样式属性。因此，您必须为其样式添加width和height的值。

示例：

<ImageBackground 
    source={require('../images/pic.png')} 
    style={{width: '100%', height: '100%'}} //add this
>
    <Text>Inside</Text>
</ImageBackground>

TypeError：undefined不是对象（评估'style.width'）

3 个答案: