IT이야기

기본 반응의 표 행 및 열?

cyworld 2022. 3. 19. 12:13
반응형

기본 반응의 표 행 및 열?

Resact Native(원본 반응)에서 테이블을 만들 수 있는가?

1열 1열 너비가 2열 1열 너비와 같을 때?

JS를 통해 이 레이아웃을 만들었는데 https://jsfiddle.net/kws67ajb/

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

참조URL: https://stackoverflow.com/questions/40220557/table-rows-and-columns-in-react-native

반응형