Question

我只是想在我的React Native项目中添加<ImageBackground>，但我总是收到错误消息：＆＃34; TypeError：undefined不是对象（评估style.width）＆＃34;。错误位于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)

Answer 1

错误在您的代码段中

<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>

Answer 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%,
},

TypeError：undefined不是一个对象（评估style.width）本机反应

2 个答案: