反应原生映射元素组

Question

我有一个用 View 创建的自定义卡片元素，我想在一行上映射卡片元素双卡，例如数组有 4 个元素 2 个卡片项目在第一行其他 2 个卡片项目其他行所以根据元素对每行进行双组视图在数组中，我下面的代码是所有元素行

const cardView = () => {
    cardItem = [
      {title: 'Title1', value: 'val1'},
      {title: 'Title2', value: 'val2'},
      {title: 'Title3', value: 'val3'},
      {title: 'Title4', value: 'val4'},
    ];
    return (
      <View style={{marginHorizontal:5}}>
        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
          {cardItem.map((item, i) => {
            return (
              <View style={styles.cardInner}>
                <Text text={item.title} />
                <Text text={item.value} />
              </View>
            );
          })}
        </View>
      </View>
    );
  };

Answer 1

为了达到预期的效果，您需要在父容器上定义 flex-wrap 样式并将其设置为“wrap”，然后为每个子元素提供半角。 这是一个片段

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default function App() {
  const cardItem = [
    { title: 'Title1', value: 'val1' },
    { title: 'Title2', value: 'val2' },
    { title: 'Title3', value: 'val3' },
    { title: 'Title4', value: 'val4' },
  ];
  return (
    <View style={styles.container}>
      {cardItem.map((item, i) => {
        return (
          <View style={styles.cardInner}>
            <Text>{item.title}</Text>
            <Text>{item.value}</Text>
          </View>
        );
      })}
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    width: '100%',
    flexWrap: 'wrap',
    padding: 8,
  },
  cardInner: {
    width: '50%'
  },
});

小吃： https : //snack.expo.io/@saachitech/dcffc0

有关 flex box 和 flex wrap 属性的更多信息https://reactnative.dev/docs/flexbox#flex-wrap

Answer 2

就像对类似问题使用react-native-grid-component一样。 可以设置每行numColumns自定义元素数量。

例子：

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

import Grid from 'react-native-grid-component';

class Simple extends Component {
  _renderItem = (data, i) => (
       <View style={styles.cardInner}>
         <Text text={item.title} />
          <Text text={item.value} />
       </View>
  );

  render() {
    return (
      <Grid
        renderItem={this._renderItem}
        data={[
          {title: 'Title1', value: 'val1'},
          {title: 'Title2', value: 'val2'},
          {title: 'Title3', value: 'val3'},
          {title: 'Title4', value: 'val4'},
        ]}
        numColumns={2}
      />
    );
  }
}

const styles = StyleSheet.create({
  ...
});

Answer 3

你可以这样做：

const cardView = () => {
  cardItem = [
    { title: 'Title1', value: 'val1' },
    { title: 'Title2', value: 'val2' },
    { title: 'Title3', value: 'val3' },
    { title: 'Title4', value: 'val4' },
  ];

  mappedCards = cardItem.map((item) => {    
    return (
      <Text text={item.title} />
    )
  })


  return (
    <View style={{ marginHorizontal: 5 }}>
      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <View style={styles.cardInner}>
          {mappedCards}
        </View>
      </View>
    </View>
  );
};