开发者问题收集

TypeError：未定义不是一个对象（评估“style.width”）

2019-11-30
1985
react-native 
          <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>

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

3个回答

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

Note that you must specify some width and height style attributes.

因此，只需将您的代码替换为以下内容： 

 <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>
Gaurav Roy
2019-11-30

正如 react-native ImageBackground 文档 中所述，您必须指定一些宽度和高度样式属性。因此，您必须添加其样式的 width 和 height 值。

示例： 

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

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

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

Matt U
2019-11-30