我已经构建了一个屏幕,其中只包含屏幕中央的内容并包含背景图像。我检查了代码,但没有发现错误的东西。这是代码:
import React, {Component} from "react";
import {Image} from "react-native";
import {
Content,
Button,
Text,
Icon,
} from "native-base";
class ThankyouScreen extends Component {
render() {
return (
<Image style={styles.image} source={require("../img/cover.jpg")}>
<Content
contentContainerStyle={{
alignSelf: "center",
justifyContent: "center",
flex: 1,
}}
>
<Icon name="checkmark" style={styles.icon} />
<Text style={styles.text}> Thank You For Joining Us!!</Text>
<Button
bordered
style={styles.button}
onPress={() => this.props.navigation.navigate("Home")}
>
<Text style={{color: "#42e5f4"}}> Back To Home</Text>
</Button>
</Content>
</Image>
);
}
}
const styles = {
image: {
flex: 1,
alignSelf: "stretch",
width: undefined,
height: undefined,
},
icon: {
justifyContent: "center",
alignSelf: "center",
fontSize: 90,
fontWeight: "bold",
color: "#42e5f4",
},
text: {
justifyContent: "center",
alignSelf: "center",
fontSize: 20,
color: "#42e5f4",
},
button: {
alignSelf: "center",
marginTop: 15,
fontSize: 10,
fontWeight: "bold",
color: "#0dc49d",
borderColor: "#42e5f4",
},
};
export default ThankyouScreen;
错误看起来很奇怪,很难理解它导致的原因。这段代码有什么问题以及如何解决?