减少React Native中元素之间的空间

Question

作为React Native的新手，我在将三个元素放在一起时遇到了问题。

在应用程序的图片中，您可以看到三个按钮。将它们放在靠近的位置，同时保持色谱柱。

这里是代码：

[App.js，渲染组件LandingPage：

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
import LandingPage from './src/screens/LandingPage/LandingPage'

export default class MyComponent extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <LandingPage></LandingPage>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
});

组件LandingPage，使用组件ButtonRounded：

import React from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';

import ButtonRounded from '../../components/ButtonRounded/ButtonRounded';

export default class LandingPage extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonPosition}>
          <ButtonRounded></ButtonRounded>
        </View>
        <View style={styles.buttonPosition}>
          <ButtonRounded></ButtonRounded>
        </View>
        <View style={styles.buttonPosition}>
          <ButtonRounded></ButtonRounded>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  buttonPosition: {
    flex: 1,
  },
});

这是使用NativeBase的ButtonRounded组件：

import React, {Component} from 'react';
import {StyleSheet} from 'react-native';

import {Container, Header, Content, Button, Text} from 'native-base';

export default class ButtonRounded extends Component {
  render() {
    return (
      <Button rounded style={styles.button_style}>
        <Text style={styles.text_style}>Example</Text>
      </Button>
    );
  }
}

const styles = StyleSheet.create({
  button_style: {
    margin: '25%',
    backgroundColor: '#99D066',
    justifyContent: 'center',
  },
  text_style: {
    color: '#000',
  },
});

我已经尝试了几种方法来修改flex属性，padding和margin。但是我不知何故觉得我根本无法识别一些基本信息。帮助将不胜感激。

Answer 1

在我的回答的最后，是完整的示例。

React Native默认使用flexbox布局。我将简要解释使用它时最常用的3个属性。您需要使用align-items，justify-content和flex-direction播放。

flex-direction

建立主轴，从而定义将伸缩项目放置在伸缩容器中的方向。可以将弹性项目想像为主要以水平行或垂直列布置。

主要值是：row，row-reverse，column，column-reverse

justify-content

定义沿主轴的对齐方式。当一行上的所有伸缩项目都不灵活或已达到最大大小时，它可以帮助分配剩余的剩余可用空间。当项目溢出线时，它还对项目的对齐方式施加一些控制。

一些最常用的值是：

• flex-start（默认）：物品在弹性方向的开始方向打包。

• flex-end：项目在伸缩方向的结尾处打包。

• center：项目沿线居中

• space-between：项目均匀分布在行中；第一项位于起始行，最后一项位于结束行

• space-around：项均匀分布在行中，并具有相等的间隔。

• space-evenly：分配项，以便任何两个项之间的间隔

align-items

定义当前行上弹性项目沿交叉轴的布局方式的默认行为。将其视为横轴（垂直于主轴）的justify-content版本。

一些最常用的值是：

• [stretch（默认）：拉伸以填充容器
• [flex-start：项目放置在十字轴的起点]
• [flex-end：项目放置在十字轴的末端。
• center：项目在横轴上居中基线：项目已对齐，例如基线已对齐

要了解更多flexbox，可以将交互式有趣的游戏用于名为flexboxfroggy的游戏或阅读A Complete Guide to Flexbox

export default class MyComponent extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <LandingPage></LandingPage>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
});

export default class ButtonRounded extends React.Component {
  render() {
    return (
      <Button rounded style={styles.button_style}>
        <Text style={styles.text_style}>Example</Text>
      </Button>
    );
  }
}

const styles = StyleSheet.create({
  button_style: {
    backgroundColor: '#99D066',
    justifyContent: 'center',
    marginTop: 10,
    marginBottom: 10
  },
  text_style: {
    color: '#000',
  },
});

export default class LandingPage extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonPosition}>
          <ButtonRounded></ButtonRounded>
        </View>
        <View style={styles.buttonPosition}>
          <ButtonRounded></ButtonRounded>
        </View>
        <View style={styles.buttonPosition}>
          <ButtonRounded></ButtonRounded>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center"
  }
});