问题描述
我仍在学习react-native,并希望将backgroundColor设置为在app.js中导入的整个屏幕。
即使将flex设置为1,高度也可以覆盖屏幕,但宽度始终为中心,但不能覆盖整个屏幕。
这是我在做什么:
App.js
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet,Text,View } from "react-native";
import Splash from "./Screen/Splash";
import TestScreen from "./Screen/TestScreen";
export default function App() {
return (
<View style={styles.container}>
{/* <Splash /> */}
<TestScreen />
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,// flexDirection: "column",backgroundColor: "#fff",alignItems: "center",justifyContent: "center",},});
TestScreen.js:
import React from "react";
import { View,StyleSheet } from "react-native";
const Test = () => {
return (
<View style={styles.container}>
<Text>Hello</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,backgroundColor: "rgb(0,168,150)",});
export default Test;
那么,如何正确地将backgroundColor设置为ScreenTest以覆盖整个屏幕?
谢谢
解决方法
在app.js中可能添加了全角属性:
<TestScreen style = {styles.redbox} >
container: {
flex: 1
},redbox: {
width: 100,height: 100,backgroundColor: 'red'
},