这是一个代码
<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,
}}
/>
}
/>
用户界面视图:
预期视图:

这是从 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;
为什么评论宽度后有效:
以上就是平面列表水平所有项目在 iOS 中完全可见,而不是在 Android ContentContainerStyle 中的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号