这是一个代码
<flatlist horizontal={ishorizontal} contentcontainerstyle={{ // width: ishorizontal ? 274 : '100%', paddinghorizontal:10 }} overscrollmode="never" style={styles.framegroup} data={[1, 2, 3, 4, 5]} renderitem={renderitem2} itemseparatorcomponent={ } />
用户界面视图：
预期视图：
这是从 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 中的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1500686.html
微信扫一扫 
支付宝扫一扫 
