TypeError: undefined is not an object (evalating style.width) react native答案

【问题标题】：TypeError: undefined is not an object (evaluating style.width) react nativeTypeError: undefined is not an object (evalating style.width) react native
【发布时间】：2023-10-09 08:38:01
【问题描述】：

我只是想在我的 React Native 项目中添加一个 <ImageBackground>，但我总是收到错误消息：“TypeError: undefined is not an object (evalating style.width)”。错误位于 ImageBackground（位于 index.js:31）。

我有另一个项目，它可以像这样完美地工作。会不会是 React Native 版本的问题？

import React, {Component} from 'react'
import {
StyleSheet,
View,
TouchableOpacity,
Text,
AsyncStorage,
Dimensions,
ImageBackground
} from 'react-native'
import * as Colors from '../../themes/colors'
import {getNavigationOptions} from '../../utils/navigation'
import * as ducks from '../../ducks'
import {connect} from 'react-redux'

class LoginScreen extends Component{
  login(){
    const {updateCurrentUser} = this.props
    updateCurrentUser({name: 'Mauricio'})
    console.log('login', this.props.currentUser)
  }

olvidarContraseña(){
   console.log('olvidar contraseña')
}

render(){
return (
  <View style={styles.container}>
    <View style={[styles.input, {borderColor: Colors.primary}]}>
      <ImageBackground>
        style={styles.backgroundImage}
        source={require('./trigo_background.jpg')}>
        {/* <TouchableOpacity
          style={styles.btnSubmit}
          onPress={() => this.login()}
        >
          <Text style={{textAlign: 'center', color: Colors.primary}}>
            Iniciar Sesión
          </Text>
        </TouchableOpacity> */}
      </ImageBackground>
    </View>
  </View>
)
}
}

const styles = StyleSheet.create({
 container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#F5FCFF'
},
backgroundImage: {
 width: Dimensions.get('window').width,
 height: Dimensions.get('window').height,
 position: 'absolute',
 top: 0,
 left: 0
},
btnSubmit: {
 justifyContent: 'center',
 padding: 10,
 flexDirection: 'row'
},
input: {
 height: 40,
 paddingHorizontal: 10,
 borderWidth: 1,
 borderRadius: 5
 }
})

LoginScreen.navigationOptions = ({navigation}) =>
  getNavigationOptions('Login', Colors.primary, 'white')

const mapStateToProps = store => ({
   currentUser: store.currentUser
})

const mapDispatchToProps = {
  updateCurrentUser: ducks.updateCurrentUser
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)

【问题讨论】：

标签： javascript react-native

【解决方案1】：

错误在于您的代码 sn-p

<ImageBackground> <== Here
        style={styles.backgroundImage}
        source={require('Valcereal/assets/trigo_background.jpg')}>
        {/* <TouchableOpacity
          style={styles.btnSubmit}
          onPress={() => this.login()}
        >
          <Text style={{textAlign: 'center', color: Colors.primary}}>
            Iniciar Sesión
          </Text>
        </TouchableOpacity> */}
      </ImageBackground>

您已关闭标签并在其后添加 代码行，这会引发错误，因为它无效 jsx

正确的代码是

<ImageBackground
            style={styles.backgroundImage}
            source={require('Valcereal/assets/trigo_background.jpg')}>
            {/* <TouchableOpacity
              style={styles.btnSubmit}
              onPress={() => this.login()}
            >
              <Text style={{textAlign: 'center', color: Colors.primary}}>
                Iniciar Sesión
              </Text>
            </TouchableOpacity> */}
          </ImageBackground>

【讨论】：

【解决方案2】：

在文件析构函数的顶部，像这样的高度和宽度属性

const { width, height } = Dimensions.get('window');

在我们的样式对象中，将 BackgroundImage 对象替换为

backgroundImage: {
   width: width,
   height: height,
   position: 'absolute',
   top: 0,
   left: 0
},

在 React native 中设置 backgroundImage 的另一种方法是将高度和宽度设置为 100%。

backgroundImage: {
   width: 100%,
   height: 100%,
},

【讨论】：

【解决方案3】：

尽管您提供了错误的格式，但您也会得到相同的结果/错误。所以 ImageBackground 的样式应该是这样的：

{ width: undefined, height: undefined }

在 react-native ImageBackground 的文档中提供

【讨论】：