在 React Native 中减少元素之间的 space

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,
  },
});

这是 ButtonRounded使用 NativeBase 的组件：

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 项目都不灵活或灵活但已达到其最大大小时，它有助于分配额外的自由 space 剩余。它还对项目溢出行时的对齐方式施加一些控制。

它的一些最常用的值是：

flex-start（默认）：项目被打包到 flex 方向的开始。
flex-end：项目被打包到 flex 方向的末端。
center：项目沿线居中
space-between：项目在行中均匀分布；第一项在开始行，最后一项在结束行
space-around：项目均匀分布在行中，周围space相等。
space-evenly: 项目分布使得任意两个项目之间的间距

`align-items`

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

它的一些最常用的值是：

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

要了解更多 flexbox，您可以使用一个名为 flexboxfroggy or read 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"
  }
});

在 React Native 中减少元素之间的 space

Decrease space between elements in React Native

react-native

react-native-android

native-base

`flex-direction`

`justify-content`

`align-items`