javascript - 类型错误 : undefined is not an object (evaluating style. 宽度) native react

Question

我只是想添加一个 <ImageBackground>到我的 React Native 项目，但我总是收到错误消息:“TypeError: undefined is not an object (evaluating 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)

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>