react-native - React Native 表格组件
问题描述
我正在使用 React Native Table Component,使用下面的示例。我想将一列的文本向左对齐,其他的在中心。问题似乎是我只能在所有列而不是单独设置它。
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Table, TableWrapper, Row, Rows, Col } from 'react-native-table-component';
export default class ExampleTwo extends Component {
constructor(props) {
super(props);
this.state = {
tableHead: ['', 'Head1', 'Head2', 'Head3'],
tableTitle: ['Title', 'Title2', 'Title3', 'Title4'],
tableData: [
['1', '2', '3'],
['a', 'b', 'c'],
['1', '2', '3'],
['a', 'b', 'c']
]
}
}
render() {
const state = this.state;
return (
<View style={styles.container}>
<Table borderStyle={{borderWidth: 1}}>
<Row data={state.tableHead} flexArr={[1, 2, 1, 1]} style={styles.head} textStyle={styles.text}/>
<TableWrapper style={styles.wrapper}>
<Col data={state.tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.text}/>
<Rows data={state.tableData} flexArr={[2, 1, 1]} style={styles.row} textStyle={styles.text}/>
</TableWrapper>
</Table>
</View>
)
}
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
head: { height: 40, backgroundColor: '#f1f8ff' },
wrapper: { flexDirection: 'row' },
title: { flex: 1, backgroundColor: '#f6f8fa' },
row: { height: 28 },
text: { textAlign: 'center' }
});
解决方案
我想你可以这样做:
function leftAlign(value) {
return (
<Text style={{alignSelf: "flex-start"}}>{value}</Text>
);
}
export default class ExampleTwo extends Component {
constructor(props) {
super(props);
this.state = {
tableHead: ['', 'Head1', 'Head2', 'Head3'],
tableTitle: ['Title', 'Title2', 'Title3', 'Title4'],
tableData: [
[leftAlign('1'), '2', '3'],
[leftAlign('a'), 'b', 'c'],
[leftAlign('1'), '2', '3'],
[leftAlign('a'), 'b', 'c'],
],
};
}
[...]
推荐阅读
- c - 查找字符串中的字符串分隔符数量
- python - 通过 ipywidgets.interact 更新 hist2d 图不起作用
- docker - 我怎么能禁止外部连接到 dockerized mysql?
- google-apps-script - 使用 getPlainBody() 无法完全阅读一些剪辑的电子邮件
- node.js - 针对 Google Smart Home 错误采取措施的测试套件
- python-3.x - 读取 CSV 文件时 Python Pandas 出错
- c - 如何在 C 中使用 exec 传递参数并使用它们?
- css - Flexbox 高度未根据内部文本内容调整大小
- javascript - 根据所选值传递隐藏输入
- android - Kotlin如何调用作为参数传递的方法