react-native - React Native中的表行和列？

是否可以在React Native中创建表？

我的意思是当第一行的第一列的宽度等于第二行的第一列的宽度时的情况？

我已经在这里通过JS创建了该布局：https://jsfiddle.net/kws67ajb/

任何人在React Native上都有经验吗？

P. S. StackOverflow验证器的一些代码：

<div class="table">
    <div class="row">
        <div class="col col-left"><span>Some text</span></div>
        <div class="col"><span>1.123</span></div>
    </div>
    <div class="row">
        <div class="col col-left"><span>text</span></div>
        <div class="col"><span>1.432</span></div>
    </div>
</div>

最佳答案

import React, { Component } from 'react';
import {
  StyleSheet, Text, View,
} from 'react-native';
export default class DenemeGameScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      labels: ['Label 1', 'Label 2', 'Label 3'],
      values: [
        [1, 2, 3],
        [11, 22, 33],
        [111, 222, 333],
      ]
    };
  }
  renderValues = (values, key) => {
    return values.map((item, key) => {
      return this.renderCell(item, key)
    })
  }
  getStyle = (index) => {
    switch (index) {
      case 0:
        return [styles.row_1, styles.rowDefault]
      case 1:
        return [styles.row_2, styles.rowDefault]
      case 2:
        return [styles.row_3, styles.rowDefault]
    }
  }
  renderCell = (value, key) => {
    return <View style={this.getStyle(key)} key={key}><Text key={key} style={styles.valueStyle}>{value}</Text></View>
  }

  renderRow = (choice) => {
    return choice === "label" ? <View style={styles.row}>
      {this.state.labels.map((item, key) => (
        this.renderCell(item, key)
      ))}</View> : <View>
        {this.state.values.map((item, key) => (
          <View style={styles.row} key={key}>
            {this.renderValues(item, key)}
          </View>
        ))}</View>
  }
  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "white" }}>
        {this.renderRow("label")}
        {this.renderRow("val")}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    height: 30,
  },
  rowDefault: {
    padding: 2,
    borderColor: "black",
    borderWidth: 1
  },
  row_1: {
    flex: 1,
  },
  row_2: {
    flex: 2,
  },
  row_3: {
    flex: 3,
  },
  valueStyle: {
    flex: 1,
  }
});