这是一个代码
<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中文网其它相关文章!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号