React Native Expo横向FlatList无法滚动及元素尺寸异常问题

问题概述 #

• 横向FlatList滚动时会自动弹回起始位置，无法浏览全部列表项
• 列表项文本过长时，灰色容器会被撑大，无法保持固定尺寸

问题原因 #

1. 滚动异常：App根容器设置了marginLeft:30，同时BottomHorizontalBoxes的外层View使用width:'100%'，导致FlatList实际宽度超出父容器可视范围，滚动计算逻辑出错；另外使用splice(4)修改原数组，可能引发数据不稳定。
2. 尺寸失控：列表项容器使用相对宽度width:'90%'，且文本未做截断处理，过长文本会撑开容器。

修复代码 #

修改App.js #

调整根容器样式，避免全局margin影响子组件宽度计算：

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import BestRated from './components/BestRated';
import BottomHorizontalBoxes from './components/BottomHorizontalBoxes';

export default function App() {
  return (
    <View style={styles.container}>
      <BestRated />
      <BottomHorizontalBoxes />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    marginTop: 100,
    paddingLeft: 30, // 用paddingLeft替代marginLeft，避免挤压子组件宽度
  },
});

修改BottomHorizontalBoxes.js #

修复数据处理方式，给FlatList和列表项设置合理尺寸，添加文本截断：

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

const BottomHorizontalBoxes = () => {
  // 示例数据（实际替换为API返回数据）
  const foodList = [
    {id: '1', title: 'Short Title'},
    {id: '2', title: 'This is a very long title that would break the container'},
    {id: '3', title: 'Another Test Title'},
    {id: '4', title: 'Fourth Item'},
    {id: '5', title: 'Fifth Long Title Example'},
    {id: '6', title: 'Sixth Item with Long Text'}
  ]

  // 用slice替代splice，不修改原数组，返回新数组
  const foodListWithoutFirst4 = foodList.slice(4)

  return (
    <View style={{ width: '85%' }}> {/* 限制FlatList容器宽度，适配根容器padding */}
      <FlatList
        horizontal={true}
        showsHorizontalScrollIndicator={true}
        data={foodListWithoutFirst4}       
        keyExtractor={(item) => item.id}
        // 添加contentContainerStyle给列表项添加间距
        contentContainerStyle={{gap: 10}}
        renderItem={({ item }) => {
          return (
            <View style={styles.itemViewContainer}>
              {/* 文本截断，固定行数，超出显示省略号 */}
              <Text style={styles.itemText} numberOfLines={2} ellipsizeMode='tail'>
                {item.title}
              </Text>
            </View>
          )
        }}
      />
    </View>
  )
}

export default BottomHorizontalBoxes

const styles = StyleSheet.create({
  itemViewContainer: {
    backgroundColor: '#d9d9d9',
    alignItems: 'center',
    justifyContent: 'center',
    height: 100,
    width: 200, // 固定宽度，避免被文本撑开
    borderRadius: 10,
    paddingHorizontal: 10, // 内边距避免文本贴边
  },
  itemText: {
    textAlign: 'center',
  }
})

BestRated.js（无需修改） #

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

const BestRated = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>Best Rated!</Text>
        </View>
    )
}

export default BestRated

const styles = StyleSheet.create({
    container: {
        borderBottomWidth: 1,
        width: '80%',
        marginBottom: 15,
    },

    text: {
        color: '#818181',
        width: '80%',
        fontWeight: 'bold',
    }
})

关键修复点说明 #

1. 滚动问题：

   • 根容器用paddingLeft替代marginLeft，避免子组件宽度被挤压
   • 用slice(4)替代splice(4)，防止修改原数组导致数据状态异常
   • 给FlatList外层View设置明确宽度，确保滚动计算基于可视范围

2. 尺寸问题：

   • 列表项容器使用固定宽度（如200），替代相对宽度90%
   • 给Text组件添加numberOfLines和ellipsizeMode，实现文本截断，避免撑开容器
   • 添加paddingHorizontal和contentContainerStyle.gap优化布局间距

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