无法使网格的高度为100%

时间:2018-07-20 09:25:03

标签: react-native react-native-android react-native-ios expo native-base

enter image description here

我正在尝试删除屏幕上看到的可用空间(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%的高度?

0 个答案:

没有答案