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

珍惜时间，勤奋学习！今天给大家带来《平面列表水平所有项目在 iOS 中完全可见，而不是在 Android ContentContainerStyle 中》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

这是一个代码

 
                }
            />

用户界面视图：

预期视图：

这是从 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 根据其子级动态计算内容的宽度。
• 没有添加填充偏移，因此不存在可滚动区域计算不正确的风险。
• 因此，水平滚动可以按预期工作。

终于介绍完啦！小伙伴们，这篇关于《平面列表水平所有项目在 iOS 中完全可见，而不是在 Android ContentContainerStyle 中》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！