React Native 如何将列表置于页面居中位置并实现滚动效果

核心实现逻辑 #

要同时满足「列表内容不足一屏时整体垂直居中」、「列表内容超过一屏时可正常滚动」两个要求，核心是通过滚动容器的contentContainerStyle搭配flexGrow属性实现，该方案同时适配ScrollView和FlatList两种常用列表组件。

方案1：使用ScrollView实现 #

import React from 'react';
import { ScrollView, View, Text, StyleSheet } from 'react-native';

const CenteredScrollList = () => {
  // 测试数据，可自行增加数量测试滚动效果
  const listData = Array.from({length: 5}, (_, i) => `列表项 ${i+1}`);

  return (
    <View style={styles.pageContainer}>
      <ScrollView 
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        {listData.map((item, index) => (
          <View key={index} style={styles.listItem}>
            <Text>{item}</Text>
          </View>
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  // 页面根容器占满全屏
  pageContainer: {
    flex: 1,
    width: '100%',
  },
  // 滚动容器内容样式，flexGrow决定内容不足时撑满滚动区域实现居中
  scrollContent: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center', // 如需水平居中可保留该属性
    paddingVertical: 20,
  },
  listItem: {
    width: '80%',
    padding: 16,
    marginVertical: 8,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  }
});

export default CenteredScrollList;

方案2：使用FlatList实现（长列表推荐，性能更优） #

如果是长列表场景，更推荐使用FlatList，配置逻辑几乎一致，只需要修改contentContainerStyle属性即可：

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

const CenteredFlatList = () => {
  const listData = Array.from({length: 15}, (_, i) => ({id: i.toString(), title: `列表项 ${i+1}`}));

  const renderItem = ({item}) => (
    <View style={styles.listItem}>
      <Text>{item.title}</Text>
    </View>
  );

  return (
    <View style={styles.pageContainer}>
      <FlatList
        data={listData}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        contentContainerStyle={styles.listContent}
        showsVerticalScrollIndicator={false}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  pageContainer: {
    flex: 1,
    width: '100%',
  },
  listContent: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  listItem: {
    width: '80%',
    padding: 16,
    marginVertical: 8,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  }
});

export default CenteredFlatList;

注意事项 #

• 不要给滚动组件（ScrollView/FlatList）本身设置固定高度，否则会无法自适应内容高度
• flexGrow: 1是实现居中的核心属性，不能省略，该属性表示滚动内容区可以撑开占据滚动容器的所有可用空间，这样内容不足时justifyContent: 'center'才能生效
• 如果需要限制列表的最大宽度，可在滚动容器上添加maxWidth属性控制

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