减少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

您需要玩align-items和justify-content。

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

align-items定义如何在当前行上沿交叉轴布局弹性项目的默认行为。将其视为交叉轴（垂直于主轴）的证明内容版本。

Flexbox在React Native中非常常用，因此我建议您学习得很好。您可以将交互式有趣的游戏用于flexboxfroggy或阅读A Complete Guide to Flexbox