Javascript react本机表组件冻结第一列&；可滚动表格中的第一行

所需状态

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表组件，这是一个用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>
    )
}

我可以获得第一行所需的状态，但不能对同一表中的第一列执行相同的操作

代码

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>
    )
}

render（）{
返回(
)
}

其他信息 我不需要使用react native table组件，但如果可能的话，我希望使用react native table组件，因为我已经做了很多工作来设置它的样式并格式化插入的数据

---

提前感谢您的帮助

这里有一个有效的解决方案。基本上，您需要将左窗格上的垂直滚动与第一列窗格同步

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

//TableDemo.tsx
从“React”导入React，{useRef}；
从“react native”导入{ScrollView，StyleSheet，View}；
进口{
桌子
一行
排，
上校，
}来自“react native table component”；
常量borderColor='#C1C0B9'；
常量primaryColor='dodgerblue'；
常量背景色='#F7F6E7'；
导出默认函数TableDemo（）{
const leftRef=useRef（null）；
const righref=useRef（null）；
常量状态={
桌面：[
“头1”，
"总目2",，
“头3”，
"总目4",，
"总目5",，
"总目6",，
"总目7",，
“头8”，
“头9”，
],
宽度[50,60,80,100,120,140,160,180,200]，
};
常数头高=40；
常数leftColumnWidth=100；
常量记录数据=[]；
对于（设i=0；i<60；i+=1）{
常量rowData=[]；
push（`Record${i}`）；
recordData.push（行数据）；
}
const tableData=[]；
对于（设i=0；i<60；i+=1）{
常量rowData=[]；
对于（设j=0；j<9；j+=1）{
rowData.push（`${i}${j}`）；
}
tableData.push（rowData）；
}
返回(
{/*左列*/}
{/*空白单元格*/}
{/*左容器：滚动同步*/}
{recordData.map（（rowData，index）=>(
))}
{/*右列*/}
{
const{y}=e.nativeEvent.contentOffset；
leftRef.current？.scrollTo（{y，动画：false}）；
}}
>
{tableData.map（（行数据，索引）=>(
))}
);
}
const styles=StyleSheet.create({
容器：{flex:1，padding:16，paddingTop:30，backgroundColor:'#eee'}，
头部：{高度：40，背景颜色：primaryColor}，
包装器：{flexDirection:'row'}，
标题：{flex:1，背景色：'#f6f8fa'}，
行：{高度：28}，
文本：{textAlign:'center'}，
数据包装器：{marginTop:-1}，
});

这正是我的问题，你有没有可能想出解决方案？没有，我还没有！我现在推迟了，但我肯定需要在接下来的几个月内解决它。我在网上读到过关于使用两个滚动视图的内容，一个用于希望修复的左边列，另一个用于表的其余部分。然后将两者“链接”在一起，这样当其中一个滚动时，另一个也会滚动。我还没有试过，但这可能是唯一的选择你试过吗：（他们在文章中也有一个零食的例子）。它包括一个listview和一个flatlist（以及一个使滚动看起来平滑的动画），我今天将尝试它并报告回来。我建议尝试将您的表放入上面显示的模板中，它就像一个符咒（即使在我的例子中有9列和170多行）