我在一個平面串列中有一組盒子。如何讓框拉伸以固定 FlatList 的寬度？
在這個世博小吃上更容易看
<FlatList
data={DATA}
horizontal={true}
contentContainerStyle={{ flex: 1, justifyContent: 'center', alignItems: "center" }}
style={{ backgroundColor: 'skyblue', width: "100%" }}
renderItem={({ item, idx }) => (
<View
key={'flatlist' idx}
style={{ backgroundColor: 'powderblue', padding: 10, margin: 5, flex:1, width: "100%" }}>
<Text>{item.id}</Text>
</View>
)}
keyExtractor={(item) => item.id}
/>
uj5u.com熱心網友回復：
無法正確理解您想要什么，但是通過獲取Dimension寬度而不是給出寬度來嘗試此代碼100%
import * as React from 'react';
import { Text, View, StyleSheet, FlatList, Dimensions } from 'react-native';
import Constants from 'expo-constants';
const {width} = Dimensions.get("window");
const DATA = [
{
id: '1',
title: 'First Item',
},
{
id: '2',
title: 'Second Item',
},
{
id: '3',
title: 'Third Item',
},
{
id: '4',
title: 'Forth Item',
},
];
export default function App() {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
}}>
<View style={{ height: 600}}>
<Text>How do you get the boxes to span the width?</Text>
<FlatList
data={DATA}
horizontal={true}
style={{ backgroundColor: 'skyblue', width: "100%" }}
renderItem={({ item, idx }) => (
<View
key={'flatlist' idx}
style={{ backgroundColor: 'powderblue', padding: 10, margin: 5, flex:1, width: width }}>
<Text>{item.id}</Text>
</View>
)}
keyExtractor={(item) => item.id}
/>
</View>
</View>
);
}
uj5u.com熱心網友回復：
我想到了。您必須進行以下調整。關鍵是 alignItems 可以變得拉伸
<FlatList
numColumns={4}
horizontal={false}
contentContainerStyle={{alignItems: "stretch"}}
/>
完整的組件
<FlatList
data={DATA}
horizontal={false}
numColumns={4}
contentContainerStyle={{ flex: 1, justifyContent: 'center', alignItems: "stretch" }}
style={{ backgroundColor: 'skyblue', width: "100%" }}
renderItem={({ item, idx }) => (
<View
key={'flatlist' idx}
style={{ backgroundColor: 'powderblue', padding: 10, margin: 5, flex:1, width: "100%" }}>
<Text>{item.id}</Text>
</View>
)}
keyExtractor={(item) => item.id}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/394303.html
標籤：反应原生