在一行中渲染 React Native 'Tile'

Question

我是开发 React Native 应用程序的新手。我想在一行中对齐多个（可能是三个）React Native Element 'Tile'，类似于 2X3 矩阵样式。我正在尝试使用 flexbox，但无法达到结果。 这是我的代码：

import React, { Component } from 'react';
import { Text, View, TextInput, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import { Tile } from 'react-native-elements';

export default class Tel extends Component {

  render() {
    return (
      <View style={styles.tileStyle}>
              <View style={{width: 20, height: 20,}}>
              <Tile

                featured
                caption="Text"
              />
              </View>
              <View style={{width: 20, height: 20,}}>
              <Tile

                featured
                caption="Some Caption Text"
              />
              </View>
              <View style={{width: 20, height: 20,}}>
              <Tile

                featured
                caption="Some"
              />
              </View>

              <View style={{width: 20, height: 20,}}>
              <Tile

                featured
                caption="Text"
              />
              </View>
              <View style={{width: 20, height: 20,}}>
              <Tile

                featured
                caption="Some Caption Text"
              />
              </View>
              <View style={{width: 20, height: 20,}}>
              <Tile

                featured
                caption="Some"
              />
              </View>
            </View>
    );
  }
}

const styles = StyleSheet.create({
  tileStyle: {
    flex: 1,
    flexDirection: 'row',

    // alignItems: 'center',

    // justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  }
});

我只能按列获得三个图块，并且没有它们的宽度或高度。 请帮忙解决。

Answer 1

使用flex-wrap。在构造函数中获取窗口的宽度，并在Tile 的width 属性中使用它来获得您想要的比例宽度。

import {
  View,
  Dimensions,
  StyleSheet
} from "react-native";
import { Tile } from 'react-native-elements';

export class Screen extends Component {
  constructor() {
    super()

    this.state = {
      width: Dimensions.get('window').width
    }
  }

  render() {
  const { width } = this.state;
    return (
      <View style={{
        flex: 1,
        flexWrap: 'wrap',
        flexDirection: 'row',
        backgroundColor: '#ecf0f1'
      }}>
        <Tile
          width={width/3}
          featured
          caption="1"
        />
        <Tile
          width={width/3}
          featured
          caption="2"
        />
        <Tile
          width={width/3}
          featured
          caption="3"
        />
        <Tile
          width={width/3}
          featured  
          caption="4"
        />
      </View>
    );
  }
}