javascript - react-native-table-component 冻结可滚动表中的第一列和第一行
问题描述
期望状态
我正在使用 react-native-table-component,这是一个在 React Native 中呈现表格的基本组件。我需要冻结表格中的第一列和第一行,以便它们在滚动时保持在视图中。具体来说,我需要第一列在水平滚动时保持固定,并在垂直滚动时与行中的其余数据一起滚动。
我需要第一行以相同的方式运行。垂直滚动和水平滚动时保持固定,我应该滚动相应的列。
问题
我可以在第一行达到我想要的状态,但我不能对同一张表中的第一列做同样的事情。
代码
render(){
return(
<View style={styles.tableContainer}>
<ScrollView horizontal={true}>
<View>
<Table style={styles.tableHead}>
<Row
style={styles.header}
textStyle={styles.text}
data={this.props.tableHead}
widthArr={this.props.columnWidth}
/>
</Table>
<ScrollView style={styles.dataWrapper}>
<TableWrapper style={styles.tableBody}>
<Col
style={styles.title}
textStyle={styles.text}
data={this.props.tableTitle}
heightArr={[28,28]}
/>
<Rows
style={styles.row}
textStyle={styles.text}
data={this.dataFormat()}
widthArr={this.props.columnWidth}
/>
</TableWrapper>
</ScrollView>
</View>
</ScrollView>
</View>
)
}
附加信息 我不需要使用 react-native-table-component 但如果可能的话我想使用它,因为我已经做了很多工作来设置它的样式并格式化我插入的数据。
在此先感谢您的帮助!
解决方案
这是一个可行的解决方案。基本上,您需要将左窗格上的垂直滚动与第一列窗格同步。
// TableDemo.tsx
import React, { useRef } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import {
Table,
Row,
Rows,
Col,
} from 'react-native-table-component';
const borderColor = '#C1C0B9';
const primaryColor = 'dodgerblue';
const backgroundColor = '#F7F6E7';
export default function TableDemo() {
const leftRef = useRef<ScrollView>(null);
const rightRef = useRef<ScrollView>(null);
const state = {
tableHead: [
'Head1',
'Head2',
'Head3',
'Head4',
'Head5',
'Head6',
'Head7',
'Head8',
'Head9',
],
widthArr: [50, 60, 80, 100, 120, 140, 160, 180, 200],
};
const headerHeight = 40;
const leftColumnWidth = 100;
const recordData = [];
for (let i = 0; i < 60; i += 1) {
const rowData = [];
rowData.push(`Record ${i}`);
recordData.push(rowData);
}
const tableData = [];
for (let i = 0; i < 60; i += 1) {
const rowData = [];
for (let j = 0; j < 9; j += 1) {
rowData.push(`${i}${j}`);
}
tableData.push(rowData);
}
return (
<View
style={{
flex: 1,
flexDirection: 'row',
backgroundColor: '#eee',
}}
>
{/* Left Column */}
<View
style={{
width: leftColumnWidth,
backgroundColor: 'yellow',
borderRightWidth: 1,
borderRightColor: borderColor,
}}
>
{/* Blank Cell */}
<View
style={{
height: headerHeight,
backgroundColor: primaryColor,
borderBottomWidth: 1,
borderBottomColor: borderColor,
}}
></View>
{/* Left Container : scroll synced */}
<ScrollView
ref={leftRef}
style={{
flex: 1,
backgroundColor: 'white',
}}
scrollEnabled={false}
showsVerticalScrollIndicator={false}
>
<Table
borderStyle={{
borderWidth: 1,
borderColor,
}}
>
{recordData.map((rowData, index) => (
<Row
key={index}
data={rowData}
widthArr={[leftColumnWidth]}
style={index % 2 ? styles.row : { backgroundColor }}
textStyle={styles.text}
/>
))}
</Table>
</ScrollView>
</View>
{/* Right Column */}
<View
style={{
flex: 1,
backgroundColor: 'white',
}}
>
<ScrollView horizontal={true} bounces={false}>
<View>
<Table borderStyle={{ borderWidth: 1, borderColor }}>
<Row
data={state.tableHead}
widthArr={state.widthArr}
style={styles.head}
textStyle={{ ...styles.text, color: 'white' }}
/>
</Table>
<ScrollView
ref={rightRef}
style={styles.dataWrapper}
scrollEventThrottle={16}
bounces={false}
onScroll={(e) => {
const { y } = e.nativeEvent.contentOffset;
leftRef.current?.scrollTo({ y, animated: false });
}}
>
<Table borderStyle={{ borderWidth: 1, borderColor }}>
{tableData.map((rowData, index) => (
<Row
key={index}
data={rowData}
widthArr={state.widthArr}
style={index % 2 ? styles.row : { backgroundColor }}
textStyle={styles.text}
/>
))}
</Table>
</ScrollView>
</View>
</ScrollView>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#eee' },
head: { height: 40, backgroundColor: primaryColor },
wrapper: { flexDirection: 'row' },
title: { flex: 1, backgroundColor: '#f6f8fa' },
row: { height: 28 },
text: { textAlign: 'center' },
dataWrapper: { marginTop: -1 },
});
推荐阅读
- java - 为什么即使我在 web.xml 中已经有安全约束,任何授权都不能访问我的服务?
- php - mysql 无法识别查询使用 php 中的特殊字符集
- c# - CI 与 Jenkins MSB3202 在使用子项目构建作业时出错
- ios - 任务调度 iOS
- dart - 如何为飞镖设置 VS Code
- android - 当我在 android 的 termux 上尝试 tsudo npm install 时出现错误代码 enosys 和 err number 38
- sql - 使 Oracle 表列可为空并将默认值设置为 NULL
- java-8 - 使用选项重写 if else 空检查
- java - 如何通过 application.properties 注入日期值
- python - 如何在 Jenkins 中为每个构建自动更改文件名(结果存储为 pickle 文件)?阅读以下内容以了解有关该问题的更多信息