FlatList с горизонтальной прокруткой и липкой колонкой - PullRequest
Новая
       5

FlatList с горизонтальной прокруткой и липкой колонкой

0 голосов
/ 12 февраля 2019

Я ищу компонент, в котором я могу иметь несколько строк и столбцов.В котором первый столбец будет липким, а остальные столбцы будут прокручиваться как горизонтально, так и вертикально.Я нашел решение в reactJS с использованием Table, но нет способа сделать это с FlatList.Если у кого-то есть идеи или они могут направить меня в правильном направлении.

Я пробовал несколько ScrollView, но это не сработало 

<ScrollView>
    <ScrollView horizontal>

    </ScrollView>
</ScrollView>

Выше решение не работает как ононе прокручивать вертикально.И если я добавлю прокрутку для каждой строки, она не будет работать для всего FlatList.Мне нужно что-то вроде в этом примере

Я нашел этот справочный вопрос, но его решение - дать горизонтальную прокрутку для каждой строки.

1 Ответ

0 голосов
/ 12 февраля 2019

Установить библиотеку 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

ОБНОВЛЕНИЕ:

Замените <View> на <ScollView> на родителе<Table /> компонент.

...