具有水平滚动和粘性列的 FlatList

Question

我正在寻找可以有多个行和列的组件。其中第一列将是粘性的，其余列将水平和垂直滚动。我在reactJS 中使用Table 找到了解决方案，但没有办法使用FlatList 来解决。如果有人有任何想法或可以指导我正确的方向。

我尝试了多个ScrollView，但没有成功

<ScrollView>
    <ScrollView horizontal>

    </ScrollView>
</ScrollView>

上述解决方案不起作用，因为它没有垂直滚动。如果我为每一行添加滚动，它将不适用于整个FlatList。我需要类似this example

我找到了this 参考问题，但它的解决方案是为每一行提供水平滚动视图。

Answer 1

安装库react-native-table-component。这是一个例子：

import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Alert, ScrollView } from 'react-native';
import { Table, TableWrapper,Col, Cols, Cell } from 'react-native-table-component';

export default class ExampleFive extends Component {
  constructor(props) {
    super(props);
    const elementButton = (value) => (
      <TouchableOpacity onPress={() => this._alertIndex(value)}>
        <View style={styles.btn}>
          <Text style={styles.btnText}>{value}</Text>
        </View>
      </TouchableOpacity>
    );

    this.state = {
      tableTitle: ['Left Column', 'Left Column', 'Left Column', 'Left Column'],
      tableData: [
        [elementButton('Header 2'), 'a', 'b', 'c', 'd'],
        [elementButton('Header 3'), '1', '2', '3', '4'],
        [elementButton('Header 4'), 'a', 'b', 'c', 'd'],
        [elementButton('Header 5'), 'a', 'b', 'c', 'd'],
        [elementButton('Header 6'), 'a', 'b', 'c', 'd'],
        [elementButton('Header 7'), 'a', 'b', 'c', 'd'],
        [elementButton('Header 8'), 'a', 'b', 'c', 'd'],
        [elementButton('Header 9'), 'a', 'b', 'c', 'd']
      ]
    }
  }

  _alertIndex(value) {
    Alert.alert(`This is column ${value}`);
  }

  render() {
    const state = this.state;
    return (
      <ScrollView style={styles.container}>
        <Table style={{flexDirection: 'row'}}>
          {/* Left Wrapper */}
          <TableWrapper style={{width: 80}}>
            <Cell data="" style={styles.singleHead}/>
            <TableWrapper style={{flexDirection: 'row'}}>
              <Col data={state.tableTitle} style={styles.title} heightArr={[30, 30, 30, 30]} textStyle={styles.titleText}></Col>
            </TableWrapper>
          </TableWrapper>

          {/* Right Wrapper */}
          <ScrollView horizontal>
          <TableWrapper style={{}}>
            <Cols data={state.tableData} heightArr={[40, 30, 30, 30, 30]} textStyle={styles.text}/>
          </TableWrapper>
          </ScrollView>
        </Table>
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  singleHead: { width: 80, height: 40, backgroundColor: '#c8e1ff' },
  title: { backgroundColor: '#f6f8fa' },
  titleText: { textAlign:'center' },
  text: { textAlign: 'center' },
  btn: { width: 58, height: 18, marginHorizontal: 7, backgroundColor: '#c8e1ff', borderRadius: 2, justifyContent: "center" },
  btnText: { textAlign: 'center' }
});

在 expo 中查看此代码以进行演示：https://snack.expo.io/rJ2mE1eBE

更新：

在<Table /> 组件的父级上将<View> 替换为<ScollView>。