如何在 React Native Flatlist 中使第一列变得粘性？答案

【问题标题】：How can I make first column sticky in React Native Flatlist?如何在 React Native Flatlist 中使第一列变得粘性？
【发布时间】：2021-09-27 07:05:49
【问题描述】：

我们有针对行的stickyHeaderIndices，我找不到针对列的任何解决方案。

【问题讨论】：

stackoverflow.com/a/48806118/13913053希望这会有所帮助
请澄清，列不滚动，行滚动。使列具有粘性是什么意思？你有横向卷轴吗？
我有水平滚动。当我进行水平滚动时，第一列（测试 1、2、3 ..）应该是固定的，其余列应该是可滚动的

标签： react-native react-native-flatlist

【解决方案1】：

这可能会有所帮助

<FlatList
  data={[...]}
  ...
  ListHeaderComponent={this.Render_FlatList_Sticky_header}
  stickyHeaderIndices={[0]}
/>

【讨论】：

【解决方案2】：

您可以使用嵌套的平面列表制作此布局

import * as React from 'react';
import { Text, View, FlatList, StyleSheet } from 'react-native';

const data = [
  {
    title: 'Testing1',
    cols: ['1234', '1234', '1234'],
  },
  {
    title: 'Testing2',
    cols: ['1234', '1234', '1234'],
  },
  {
    title: 'Testing3',
    cols: ['1234', '1234', '1234'],
  },
  {
    title: 'Testing4',
    cols: ['1234', '1234', '1234'],
  },
  {
    title: 'Testing5',
    cols: ['1234', '1234', '1234'],
  },
  {
    title: 'Testing6',
    cols: ['1234', '1234', '1234'],
  },
];

export default function App() {
  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View
          style={{
            flexDirection: 'row',
          }}>
          <Text style={{ padding: 40, backgroundColor: 'white', flexGrow: 0 }}>
            {item.title}
          </Text>
          <FlatList
            horizontal={true}
            data={item.cols}
            renderItem={({ item }) => (
              <Text style={{ padding: 40 }}>{item}</Text>
            )}
          />
        </View>
      )}
    />
  );
}

Snack

【讨论】：