Как уменьшить огромное пространство между компонентами на экране? - PullRequest
Новая
       20

Как уменьшить огромное пространство между компонентами на экране?

0 голосов
/ 11 мая 2019

Я новичок, чтобы реагировать на нативную разработку, и у меня проблема, надеюсь, кто-то может мне помочь!

Я пытаюсь показать некоторые компоненты на экране, я использую встроенную базу, и когда я пытаюсь поместить компонент HomeHeader и компонент MainSection вместе в Home Экран, они показывают с огромным пространством между ними, и если я пытаюсь дублировать компоненты, между ними также отображается пробел!

Я не знаю, почему это происходит, и я надеюсь, что кто-то может мне помочь Прикрепленный код и скриншоты для результата на эмуляторе 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>
    );
  }
}

Результат

...