我只是想在<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)
错误在您的代码片段中
<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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句