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 Coloum', 'Left Coloum', 'Left Coloum', 'Left Coloum'],
      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

更新：

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

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

1 个答案:

更新：