如果您下载 pdf,则任何其他组件都不支持 React-pdf 库。如果您想多次使用表格,您可以创建自己的组件表格,例如这里
<Page style={styles.page} size="A4" wrap>
<View style={styles.table}>
<View style={[styles.row, styles.header]}>
<Text style={[styles.headerText, styles.cell]}>Column 1 Header</Text>
<Text style={[styles.headerText, styles.cell]}>Column 2 Header</Text>
<Text style={[styles.headerText, styles.cell]}>Column 3 Header</Text>
<Text style={[styles.headerText, styles.cell]}>Column 4 Header</Text>
</View>
<View style={[styles.row]}>
<Text style={[styles.cell]}>Column 1 Row 1</Text>
<Text style={[styles.cell]}>Column 2 Row 1</Text>
<Text style={[styles.cell]}>Column 3 Row 1</Text>
<Text style={[styles.cell]}>Column 4 Row 1</Text>
</View>
</View>
</Page>
或者如果您需要更多动态数据,
const styles = StyleSheet.create({
em:{
fontStyle: 'bold'
},
table: {
width: '100%',
borderWidth: 2,
display: 'flex',
flexDirection: 'column',
marginVertical: 12
},
tableRow:{
display: 'flex',
flexDirection: 'row',
},
cell: {
borderWidth: 1,
display: 'flex',
justifyContent: 'center',
alignContent: 'center',
textAlign: 'center',
flexWrap: 'wrap'
}
})
const Table = ({children, col, th}) => (
<View style={styles.table}>
{children.map((row, ind) =>
<View key={ind} style={[styles.tableRow, th && ind === 0 ? styles.em: {}]}>
{row.map((cell, j) =>
<View key={j} style={[styles.cell, {width:col[j], height: 40}]}>
{
typeof(cell) === 'string' || typeof(cell) === 'number' ?
<Text>{cell}</Text> : cell
}
</View>
)}
</View>
)}
</View>
)
//using like this
<Table
th
col={['20%', '60%', '20%']}
children={[
['TH1', 'TH2, 'TH3'],
['1', '2', '3'],
['4', '5', 6'],
['7', '8', '9']
]} />