如何在反应原生的 FlatList 中呈现方形视图列表？答案

【问题标题】：How do you render a list of square Views in a FlatList in react native?如何在反应原生的 FlatList 中呈现方形视图列表？
【发布时间】：2021-10-05 09:16:19
【问题描述】：

假设您想在FlatList 中渲染两列正方形，使其看起来像一个可滚动的正方形网格，并且可以响应不同的屏幕尺寸。

在 FlatList 方块中创建每个 <Item/> 需要 react-native 中的哪些 CSS 属性？

我试过aspectRatio 还是不行。

使用 CSS 属性 paddingTop : '50%' 适用于具有完整行但您可以看到它不适用于底部的那些。


import React from 'react'
import {View, FlatList, StyleSheet, Dimensions} from 'react-native'

const screen_length = Math.max(Dimensions.get('window').height, Dimensions.get('window').width)

const screen_width = Math.min(Dimensions.get('window').height, Dimensions.get('window').width)
   
const length_factor = screen_length/844
const width_factor = screen_width/390

const StyleSheet.create.({
  container:{
    display: 'flex',
    flex:1,
    justifyContent: 'center',
    justifyItems: 'center',
    alignItems: 'center',
    alignContent: 'center',
    width: '100%',
    height:'100%',
    flexDirection: '100%'
  },
  square:{
    flex:1 ,
    aspectRatio: 1,
    backgroundColor: 'blue',
    borderColor: 'yellow',
    borderWidth: 5,
    borderRadius: 10,
    width:Math.round( width_factor * 150),
    paddingTop:'50%',
  }
 })

 const DATA = [ {id: 1}, {id:2} , {id: 3} ]

 const Item = ({item}) => {
   <View style = {styles.square} />
 }


export default function Test() {
  renderItem = ({item})=> {
    return(
      <Item />
    )
  }

  return(
    <FlatList
      data = {DATA}  
      renderItem = {renderItem}
      keyExtractor = {item => item.theme}
      numColumns = {2}
      style ={{flex:1, width:'100%', height: '100%'}}
      contentContainerStyle = {styles.container}
    />
  )
}

【问题讨论】：

截图中最后一个方块是什么？
@novonimo 这是最后一项。如果我在最后一行只有一个项目，那么它不会正确显示（即最后一个项目是矩形而不是正方形）

标签： css react-native

【解决方案1】：

import React from 'react';
import { View, FlatList, StyleSheet, Dimensions } from 'react-native';

const screen_length = Math.max(
  Dimensions.get('window').height,
  Dimensions.get('window').width
);

const screen_width = Math.min(
  Dimensions.get('window').height,
  Dimensions.get('window').width
);

const length_factor = screen_length / 844;
const width_factor = screen_width / 390;

const styles = StyleSheet.create({
  square: {
    flexGrow: 0,
    flexShrink: 1,
    flexBasis: '50%',
    backgroundColor: 'blue',
    borderColor: 'yellow',
    borderWidth: 5,
    borderRadius: 10,
    paddingTop: '50%',
  },
  row: {
    flex: 1,
    justifyContent: 'space-around',
  },
});

const DATA = [{ id: 1 }, { id: 2 }, { id: 3 }];

const Item = ({ item }) => <View style={styles.square} />;
const renderItem = ({ item }) => <Item />;

const App = () => {
  return (
    <FlatList
      data={DATA}
      renderItem={renderItem}
      numColumns={2}
      columnWrapperStyle={styles.row}
    />
  );
};

export default App;

https://snack.expo.dev/@ksav/greedy-ice-cream

【讨论】：