반응형
기본 반응의 표 행 및 열?
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
반응형
'IT이야기' 카테고리의 다른 글
테스트하는 동안 MemoryRouter를 사용하여 경로로 이동할 수 없음 (0) | 2022.03.19 |
---|---|
객체 배열의 각도 RxJS 관측 가능 필터 (0) | 2022.03.19 |
활자를 사용하여 여러 개의 반환 유형을 지정하는 방법 (0) | 2022.03.19 |
후크가 달린 수출 수업을 이용할 때 수업을 빼먹어야 할까? (0) | 2022.03.19 |
vue 앱의 main.js 파일에서 스토어 getter 업데이트 값에 액세스하는 방법 (0) | 2022.03.19 |