这是一个代码
} />
用户界面视图:
预期视图:

这是从 contentcontainer 样式中删除宽度后的代码
import React from 'react';
import { FlatList, View, Text, StyleSheet, Dimensions } from 'react-native';
const data = [...Array(10).keys()].map((_, i) => ({ id: i, name: `Item ${i + 1}` }));
const ITEM_WIDTH = 100;
const YourComponent = ({ item }) => (
{item.name}
);
const App = () => {
return (
item.id.toString()}
renderItem={({ item }) => }
showsHorizontalScrollIndicator={false}
contentContainerStyle={{ paddingHorizontal: 10 }}
ItemSeparatorComponent={() => }
getItemLayout={(data, index) => ({
length: ITEM_WIDTH,
offset: ITEM_WIDTH * index,
index,
})}
/>
);
};
const styles = StyleSheet.create({
item: {
width: ITEM_WIDTH,
height: 100,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0',
marginHorizontal: 5,
},
});
export default App;
为什么评论宽度后有效:
- flatlist 根据其子级动态计算内容的宽度。
- 没有添加填充偏移,因此不存在可滚动区域计算不正确的风险。
- 因此,水平滚动可以按预期工作。










