从道具数据创建平面列表网格

Question

创建一个屏幕，其中包含我从rails API获取的照片的FlatList网格。显示数据时遇到问题 - https://ibb.co/XkfSvxm。我希望图像，无论有多少，都是方形格式。

目前，我可以在方形照片中获取和显示数据，除非一行有 1 或 2 张照片。它们填充行，而不是从formatItems方法中获取格式(该方法实质上是将两个空项推送到数组中，迫使数据进入网格)。

我已经尝试了很多事情，包括直接从formatItems返回数据并将该方法直接插入平面列表的数据中，但随后没有加载任何数据。我还让它与本地 SQL DB 包配合良好。

我将如何安排，以便我可以格式化道具中的数据并在平面列表中正确显示它？

这是代码：

class VaultScreen extends React.Component {
state = {
searchQuery: '',
refreshing: false,
setRefreshing: false
};
constructor(props) {
super(props);
this.state = {
items: {},
itemSelected: {}
};
this.props.fetchPosts()
}
componentDidMount() {
let itemData = this.props.posts
this.setState({
items: itemData,
});
// this.formatItems(itemData)
}
formatItems = () => {
const { items } = this.state
const newItems = []
const numberOfFullRows = Math.floor(items.length / 3);
// const numberOfFullRows = Math.floor(itemData.length / 3);
let numberOfElementsLastRow = 1
// items.length - (numberOfFullRows * 3);
while (numberOfElementsLastRow !== 3 && numberOfElementsLastRow !== 0) {
newItems.push({ key: `blank-${numberOfElementsLastRow}`, empty: true });
numberOfElementsLastRow++;
}
return this.setState({ items: newItems })
};
renderItem = ({ item, type }) => {
const { items } = this.state;
if (item.empty === true) {
return <View style={[styles.item, styles.itemInvisible]} />;
} else {
return (
<TouchableOpacity style={styles.item} onPressIn={() => this.setState({ itemSelected: item.id })} onPress={this.viewPhoto} key={item.id}>
<Image source={{ uri: item.image }} style={{ flex: 1, width: '100%', height: undefined }} />
</TouchableOpacity>
);
}
};
render() {
return (
<SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
<FlatList
data={this.state.items}
renderItem={this.renderItem}
numColumns={3}
keyExtractor={(item, index) => index.toString()}
refreshControl={<RefreshControl refreshing={this.state.refreshing} onRefresh={() => this.onRefresh()} />}
/>
</SafeAreaView>
);
}
}
const mapStateToProps = state => ({
posts: state.vault.posts
})
const mapDispatchToProps = {
fetchPosts: () => fetchPosts(),
}
export default connect(mapStateToProps, mapDispatchToProps)(VaultScreen)

Answer 1

嗨，您可以将minWidth和maxWidth样式添加到Parant中 渲染方法的视图(在您的情况下，将样式赋予TouchableOpacity)值应total_width / 3(+-margin，如果要提供)。 然后将width:total_width添加到FlatList的columnWrapperStyle。

注意：

--total_width = 100%

-- 保持minWidth值和maxWidth值相同将根据您的期望为您提供完美的视图(在您的情况下，如果total_width : 100%那么minWidth和maxWidth值将被30%)