平面列表水平所有项目在 iOS 中完全可见，而不是在 Android ContentContainerStyle 中

这是一个代码

 <flatlist
                horizontal={ishorizontal}
                contentcontainerstyle={{
                    // width: ishorizontal ? 274 : '100%',
                    paddinghorizontal:10
                }}
                overscrollmode="never"
                style={styles.framegroup}
                data={[1, 2, 3, 4, 5]}
                renderitem={renderitem2}
                itemseparatorcomponent={
                    <view
                        style={{
                            width: ishorizontal ? 24 : 0,
                            height: !ishorizontal ? 60 : 0,
                        }}
                    />
                }
            />

用户界面视图：

预期视图：

CreateWise AI

为播客创作者设计的AI创作工具，AI自动去口癖、提交亮点和生成Show notes、标题等

下载

这是从 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 }) => (
  <View style={styles.item}>
    <Text>{item.name}</Text>
  </View>
);

const App = () => {
  return (
    <FlatList
      data={data}
      horizontal
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => <YourComponent item={item} />}
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={{ paddingHorizontal: 10 }}
      ItemSeparatorComponent={() => <View style={{ width: 10 }} />}
      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 根据其子级动态计算内容的宽度。
• 没有添加填充偏移，因此不存在可滚动区域计算不正确的风险。
• 因此，水平滚动可以按预期工作。