我正在尝试删除屏幕上看到的可用空间(marginBottom),但这似乎是一个错误。我正在将Native-Base与expo一起使用。我尝试了一些解决方案,但所有解决方案都带来了这一结果。这是代码:
import React, { Component } from 'react';
import { Dimensions, ImageBackground, StatusBar, Platform, ScrollView } from "react-native";
import { Content, View, Icon, Text } from "native-base";
import { Col, Row, Grid } from 'react-native-easy-grid';
let categoriesCol1 = [{ title: "Lorem ipsum" }, { title: "Lorem ipsum" }, { title: "Lorem ipsum" },]
let categoriesCol2 = [{ title: "Lorem ipsum" }, { title: "Lorem ipsum" }, { title: "Lorem ipsum" },]
let win = Dimensions.get('window');
export default class App extends Component {
render() {
return (
<ImageBackground style={styles.img} source={require("./cover.jpg")}>
<Content style={{ flex: 1 }}>
<Grid style={{ flex: 1 }}>
<Row >
<Col style={styles.col}>
{categoriesCol1.map((item, idx) => {
return <SectionContainer key={idx} item={item} />;
})}
</Col>
<Col style={styles.col}>
{categoriesCol2.map((item, idx) => {
return <SectionContainer key={idx} item={item} />;
})}
</Col>
</Row>
</Grid>
</Content>
</ImageBackground >
);
}
}
const SectionContainer = ({ item, navigation }) => {
return (
<Row onPress={() => console.warn("Item selected")
}>
<View style={{ justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: "#ffffff", flex: 1 }}>
<Icon active name={"home"} style={styles.icon} />
<Text style={styles.text}> {item.title} </Text>
</View>
</Row >
);
};
const styles = {
col: {
flex: 1,
backgroundColor: 'transparent'
},
img: {
flex: 1,
alignSelf: "stretch",
},
icon: {
marginTop: 50,
color: "#ffffff",
fontWeight: '900',
fontSize: 50
},
text: {
fontSize: 28,
color: '#ffffff',
marginBottom: 50
}
}
此代码有什么问题?如何从屏幕底部删除该可用空间,并使网格具有100%的高度?