你如何居中与flex=1项目的平面列表，而不是缩小内容，同时保持一个完整的宽度?

Question

我正在尝试建立一个具有以下属性的项目的平面列表。

• 有flex: 1
• 它没有指定的宽度(高度可以在图像的内容中设置)
• 是maxWidth设置
• width不能被强制到100%，因为目的是让平面列表支持多列
• minWidth不能设置，因为如果内容太大而不适合列数，它将防止内容收缩。

FlatList是屏幕的顶层组件，所以它会在iOS中做折叠头。

• 它占据了整个宽度
• 有一些内边距
• 滚动条应该向右刷新(所以你不能在FlatList本身上执行padding)

所以我得到的是像

这样的东西

const data = Array.from({length: 5}, (v,k) => ({v,k}));
function renderItem({item, index}) {
return (<View style={{
flex:1, 
maxWidth: 100, 
borderWidth: 1, 
backgroundColor: 'red',
// alignSelf: "center" (also shrinks)
}}>
<Text>{item.k}</Text>
</View>)
}
return (<FlatList
style={StyleSheet.absoluteFill}
contentContainerStyle={{
padding: 16,
// alignSelf: center (shrinks content)
}}
renderItem={renderItem}
data={data}
/>)

我也想避免onLayout，以防止太多的渲染器

https://snack.expo.dev/@trajano flatlistneedscentering

Answer 1

还有一个名为columnWrapperStyle的道具可以满足我的需求。

<FlatList
columnWrapperStyle={{
justifyContent: 'center',
}}
contentContainerStyle={{
paddingVertical: 16,
}}
initialNumToRender={2}
renderItem={renderItem}
data={data}
numColumns={numColumns} //can be set to 3 to force shrinking
ItemSeparatorComponent={() => <View style={{ height: 16 }} />}
keyExtractor={(item) => item.k.toString()}
/>
);

请注意，NativeBase没有将其公开为实用工具道具。