如何像Messenger消息列表一样反转RecyclerListView？

1. 基础使用示例（独立列表） #

首先确保安装依赖：

npm install recyclerlistview react-native-gesture-handler

或使用Yarn：

yarn add recyclerlistview react-native-gesture-handler

以下是可直接运行的基础列表代码：

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { RecyclerListView, DataProvider, LayoutProvider } from 'recyclerlistview';

// 模拟50条列表数据
const generateData = () => {
  const data = [];
  for (let i = 0; i < 50; i++) {
    data.push({ id: i, text: `列表项 ${i + 1}` });
  }
  return data;
};

const App = () => {
  // 创建数据提供者，用于检测数据变化
  const [dataProvider] = useState(
    new DataProvider((r1, r2) => r1.id !== r2.id).cloneWithRows(generateData())
  );

  // 创建布局提供者，定义每个列表项的尺寸
  const layoutProvider = new LayoutProvider(
    // 标记所有项为同一类型
    (index) => 'ITEM',
    // 设置列表项宽高：宽度占满屏幕，高度固定60
    (type, dim) => {
      dim.width = dim.maxWidth;
      dim.height = 60;
    }
  );

  // 渲染单个列表项
  const rowRenderer = (type, data) => {
    return (
      <View style={styles.rowContainer}>
        <Text style={styles.rowText}>{data.text}</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <RecyclerListView
        layoutProvider={layoutProvider}
        dataProvider={dataProvider}
        rowRenderer={rowRenderer}
        style={styles.list}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  list: {
    flex: 1,
  },
  rowContainer: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    backgroundColor: 'white',
  },
  rowText: {
    fontSize: 16,
  },
});

export default App;

2. 解决嵌套ScrollView时的滚动冲突（对应官方issue场景） #

如果需要把RecyclerListView放在滚动容器内，直接嵌套会导致滚动异常，用NestedScrollView可以解决：

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { RecyclerListView, DataProvider, LayoutProvider } from 'recyclerlistview';
import { NestedScrollView } from 'react-native-gesture-handler';

const generateData = () => {
  const data = [];
  for (let i = 0; i < 50; i++) {
    data.push({ id: i, text: `列表项 ${i + 1}` });
  }
  return data;
};

const App = () => {
  const [dataProvider] = useState(
    new DataProvider((r1, r2) => r1.id !== r2.id).cloneWithRows(generateData())
  );

  const layoutProvider = new LayoutProvider(
    (index) => 'ITEM',
    (type, dim) => {
      dim.width = dim.maxWidth;
      dim.height = 60;
    }
  );

  const rowRenderer = (type, data) => {
    return (
      <View style={styles.rowContainer}>
        <Text style={styles.rowText}>{data.text}</Text>
      </View>
    );
  };

  return (
    <NestedScrollView style={styles.container}>
      {/* 滚动容器内的顶部内容 */}
      <View style={styles.header}>
        <Text style={styles.headerText}>顶部标题区域</Text>
      </View>
      {/* 嵌套的RecyclerListView */}
      <RecyclerListView
        layoutProvider={layoutProvider}
        dataProvider={dataProvider}
        rowRenderer={rowRenderer}
        scrollEnabled={false} // 禁用自身滚动，交给NestedScrollView统一处理
        style={styles.list}
      />
      {/* 滚动容器内的底部内容 */}
      <View style={styles.footer}>
        <Text style={styles.footerText}>底部信息区域</Text>
      </View>
    </NestedScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    padding: 20,
    backgroundColor: '#2196F3',
    alignItems: 'center',
  },
  headerText: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
  },
  list: {
    flex: 1,
    minHeight: 300, // 给列表设置最小高度，确保正常显示
  },
  rowContainer: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    backgroundColor: 'white',
  },
  rowText: {
    fontSize: 16,
  },
  footer: {
    padding: 20,
    backgroundColor: '#FF9800',
    alignItems: 'center',
  },
  footerText: {
    color: 'white',
    fontSize: 16,
  },
});

export default App;

关键注意点 #

• DataProvider：用来跟踪数据变化，数据更新时会自动触发列表重渲染，必须用cloneWithRows初始化数据。
• LayoutProvider：必须为每个列表项指定明确的宽高，这是RecyclerListView高效渲染的核心，新手容易忽略导致列表不显示。
• 嵌套滚动处理：用NestedScrollView替代原生ScrollView，并禁用RecyclerListView自身滚动，即可解决滚动冲突问题。

内容的提问来源于stack exchange，提问作者user20165653