首页 > web前端 > js教程 > 正文

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

霞舞
发布: 2025-01-14 12:39:57
转载
860人浏览过

这是一个代码

 <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,
                        }}
                    />
                }
            />
登录后复制

用户界面视图:
image description

预期视图:

image description

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

以上就是平面列表水平所有项目在 iOS 中完全可见,而不是在 Android ContentContainerStyle 中的详细内容,更多请关注php中文网其它相关文章!

豆包AI编程
豆包AI编程

智能代码生成与优化,高效提升开发速度与质量!

下载
相关标签:
来源:dev.to网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号