在 React native 中不使用 FlatList 的网格视图

Question

我刚刚开始学习 React Native。我想创建网格视图。我知道我可以使用FlatList 来做到这一点。但我不想那样。我只是映射数组中的数据并使用它制作一个网格。但它没有奏效。这是我的代码。

const ingredientnsViews = INGREDIENTS.map(data => {
  return (
     <View style={styles.gridIngredients}>
       <Image
         style={styles.ingredientImage}
         resizeMode="contain"
         source={data.image}
       />
       <Text style={styles.ingredientsText}>{data.title}</Text>
     </View>
  );
});

这是我的风格。

ingredientsText: {
fontFamily: AppFonts.Primary.Sans.Regular,
fontStyle: 'normal',
fontWeight: '400',
alignSelf: 'center',
fontSize: 12,
color: COLORS.black,
},

gridIngredients: {
marginTop: 12,
width: '30%',
flexDirection: 'row',
justifyContent: 'center',
backgroundColor: COLORS.tabBgColor,
paddingStart: 16,
paddingEnd: 16,
paddingTop: 8,
paddingBottom: 8,
borderRadius: 8,
},

ingredientImage: {
width: 15,
alignSelf: 'center',
height: 15,
},

INGREDIENTS 是我的数组。我需要带有4 comumns 的网格。 提前感谢您的帮助。

Answer 1

您需要ScrollView。在ScrollView 中，您可以使用地图渲染您的网格视图。

https://snack.expo.dev/O9KI-80gn

请查看下方添加代码。

import * as React from 'react';
import {Text, Image, View, ScrollView, StyleSheet} from 'react-native';
import Constants from 'expo-constants';


// or any pure javascript modules available in npm
import {Card} from 'react-native-paper';
const INGREDIENTS = [
  {name: 'Banana', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Apple', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Orange', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Banana', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Apple', image: 'https://picsum.photos/seed/picsum/200/300'},

  {name: 'Orange', image: 'https://picsum.photos/seed/picsum/200/300'},
    {name: 'Banana', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Apple', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Orange', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Banana', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Apple', image: 'https://picsum.photos/seed/picsum/200/300'},
  {name: 'Orange', image: 'https://picsum.photos/seed/picsum/200/300'},
  
];
export default function App() {
  const ingredientnsViews = data => {
    return (
      <View style={styles.gridIngredients}>
        <Image
          style={styles.ingredientImage}
          resizeMode="contain"
          source={data.image}
        />
        <Text style={styles.ingredientsText}>{data.name}</Text>
      </View>
    );
  };
  return (
    <View style={styles.container}>
      <ScrollView>
        <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
          {INGREDIENTS.map((value, index) => {
            return ingredientnsViews(value);
          })}
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  ingredientsText: {
    //fontFamily: AppFonts.Primary.Sans.Regular,
    fontStyle: 'normal',
    fontWeight: '400',
    alignSelf: 'center',
    fontSize: 12,
    color: 'black',
  },

  gridIngredients: {
    marginTop: 12,
    width: '22%',
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: 'yellow',
    paddingStart: 16,
    paddingEnd: 16,
    paddingTop: 8,
    marginRight: 10,
    paddingBottom: 8,
    borderRadius: 8,
  },

  ingredientImage: {
    width: 15,
    alignSelf: 'center',
    height: 15,
  },
});

输出：-