如何在 React-Native 中将子视图与左对齐? [英] How to align child views to left with even space in React-Native?

问题描述

我正在尝试在 React-Native 中为我的应用程序创建一个菜单，该菜单应该具有以下方式的多个图标

I'm trying to create a menu for my application in React-Native which should have multiple icons in the below way

图标应该在同一行并包裹起来，这样如果屏幕更大，更多的图标将在同一行.

The icons should be in the same row and wrapped so that if screen is bigger more icons will be on the same row.

我目前的代码如下

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-evenly',
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingTop: 40
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'aqua',
    margin: 10,
  }
});

当前输出如下

孩子的数量将来可能会改变，但我需要在两侧留出间距，使用 flex-start 会给出以下错误的输出.我也想在两边留出间距.

The children count may change in the future but i need to have spacing on the sides, using flex-start will give the below output which is wrong.i want to have spacing in both sides as well.

如何将其与左对齐并使项目周围有均匀的空间，如上图所示?

How do i align it to left and have the items with even space around as the image above ?

推荐答案

我采取了不同的方法，使用另一个视图作为包装器并计算其宽度，这样更容易确定列宽.唯一的问题是我们应该知道项目的宽度，在我的情况下不会有问题.代码如下.

I took a different approach by using another view as a wrapper and doing the calculation of its width, this is easier to decide the column widths. The only problem is that we should know the width of the item, wont be a problem in my case. The code will be as below.

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

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      width: 110
    };
  }

  render() {
    //width of child is 110
    const width = `${100 / parseInt(this.state.width / 110)}%`;
    return (
      <ScrollView>
        <View style={styles.container} onLayout={this.onLayout.bind(this)}>
          <View style={[styles.wrapper, { width: width }]}>
            <View style={styles.box}></View>
          </View>
          <View style={[styles.wrapper, { width: width }]}>
            <View style={styles.box}></View>
          </View>
          <View style={[styles.wrapper, { width: width }]}>
            <View style={styles.box}></View>
          </View>
          <View style={[styles.wrapper, { width: width }]}>
            <View style={styles.box}></View>
          </View>
          <View style={[styles.wrapper, { width: width }]}>
            <View style={styles.box}></View>
          </View>
        </View>
      </ScrollView>
    );
  }

  onLayout(e) {
    if (this.state.width !== e.nativeEvent.layout.width) {
      this.setState({
        width: e.nativeEvent.layout.width
      })
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingTop: 40
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'green',
  },
  wrapper: {
    marginVertical: 10, alignItems: 'center'
  }
});

这篇关于如何在 React-Native 中将子视图与左对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！