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

Question

是否可以在 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>

Answer 1

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