Question

我是本机开发的新手，希望有人能帮助我！

我试图在屏幕上显示某些组件，我使用的是本机基础，并且当我尝试将 HomeHeader 组件和 MainSection 组件放在一起时在主屏幕上，它们之间会显示出很大的空间，如果我尝试复制组件，它们之间也会显示出空白！

我不知道为什么会这样，我希望有人能帮助我附加代码和屏幕截图，用于genymotion仿真器上

谢谢！

Home.js

import React from "react";
import { Container, Header, Content } from "native-base";
import { ImageBackground, Image, ScrollView } from "react-native";
import MainSection from "../Components/MainSection";
import HomeHeader from "../Components/HomeHeader";

export default class Home extends React.Component {
  static navigationOptions = {
    header: null
  };
  render() {
    return (
      <Container>
        <Content>
          <HomeHeader />
          <MainSection />
          <MainSection />
          <MainSection />
        </Content>
      </Container>
    );
  }
}

HomeHeader.js

import React from "react";
import { Container, Text } from "native-base";
import { Image, ImageBackground } from "react-native";

export default class HomeHeader extends React.Component {
  render() {
    return (
      <Container>
        <ImageBackground
          source={require("../Assets/Backgrounds/home-header.png")}
          style={{
            width: null,
            flex: 1,
            height: 130,
            flexDirection: "row",
            justifyContent: "center"
          }}
        >
        </ImageBackground>
      </Container>
    );
  }
}

MainSection.js

import React from "react";
import { Container, Content, Text, Button, View } from "native-base";
import { ImageBackground, Image, ScrollView } from "react-native";

export default class MainSection extends React.Component {
  render() {
    return (
      <Container>
        <Content>
          <View
            style={{
              flex: 1,
              flexDirection: "row",
              marginTop: 13
            }}
          >
            <Image
              source={require("../Assets/Vector_Icons/home-first-icon.png")}
              style={{ height: 50, width: 50, marginLeft: 25 }}
            />
            <Text style={{ marginTop: 15, marginLeft: 10, marginRight: 50 }}>
              Places For Going Out
            </Text>
            <Button transparent success style={{ marginTop: 3 }}>
              <Text>View More</Text>
            </Button>
          </View>

          <View
            style={{
              flex: 1,
              flexDirection: "row",
              marginTop: 13,
              marginLeft: 25
            }}
          >
            <ScrollView
              horizontal={true}
              showsHorizontalScrollIndicator={false}
            >
              <Image
                source={require("../Assets/Backgrounds/splash-bg.png")}
                style={{
                  width: 150,
                  height: 150,
                  borderRadius: 5,
                  marginRight: 10
                }}
              />
              <Image
                source={require("../Assets/Backgrounds/splash-bg.png")}
                style={{
                  width: 150,
                  height: 150,
                  borderRadius: 5,
                  marginRight: 10
                }}
              />
              <Image
                source={require("../Assets/Backgrounds/splash-bg.png")}
                style={{ width: 150, height: 150, borderRadius: 5 }}
              />
            </ScrollView>
          </View>
        </Content>
      </Container>
    );
  }
}

See here for a demo

如何减少屏幕组件之间的巨大空间？

0 个答案: