arrays - 如何在每行中显示两列是Scrollview而不是Flatlist？反应原生

Question

我需要显示一个数组，并且由于方向问题，我需要使用 array.map 而不是 Flatlist 来呈现它。

在 Flatlist 中，我可以轻松使用numColumns = {2}，但我确实需要使用 array.map，而不是 Flatlist，我可以渲染数组以仅显示一列，这就是我制作它的方式：

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {ScrollView} from 'react-native-gesture-handler';

const data = [
  {
    id: 1,
    name: 'Ronaldo',
  },
  {
    id: 2,
    name: 'Ronaldo',
  },
  {
    id: 3,
    name: 'Ronaldo',
  },
  {
    id: 4,
    name: 'Ronaldo',
  },
  {
    id: 5,
    name: 'Ronaldo',
  },
];

const Card = ({id, name}: any) => {
  return (
    <View style={styles.card}>
      <Text>{id}</Text>
      <Text>{name}</Text>
    </View>
  );
};

export default function ColumnsInMap() {
  return (
    <ScrollView>
      {data.map((item, index) => {
        console.log(index);

        return <Card key={index} id={item.id} name={item.name} />;
      })}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: 'dodgerblue',
    height: 200,
    width: '40%',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 20,
  },
});

标签： arraysreact-nativescrollviewreact-native-flatlistarray-map

Answer 1

你可以使用flexWrap: 'wrap'和项目width 50%

<ScrollView 
    contentContainerStyle={{
        flexDirection: 'row',
        flexWrap: 'wrap'
    }}>

     <View style={{width : '50%'}}></View>
     <View style={{width : '50%'}}></View>
     ....

</ScrollView>

你的例子在这里尝试小吃。

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

const data = [
  {
    id: 1,
    name: 'Ronaldo',
  },
  {
    id: 2,
    name: 'Ronaldo',
  },
  {
    id: 3,
    name: 'Ronaldo',
  },
  {
    id: 4,
    name: 'Ronaldo',
  },
  {
    id: 5,
    name: 'Ronaldo',
  },
];

const Card = ({id, name}: any) => {
  return (
    <View style={styles.card}>
      <Text>{id}</Text>
      <Text>{name}</Text>
    </View>
  );
};

export default function ColumnsInMap() {
  return (
    <ScrollView 
    contentContainerStyle={{
        flexDirection: 'row',
        flexWrap: 'wrap'}}
      >
      {data.map((item, index) => {
        console.log(index);

        return (
          <View style={{width : '50%', flexDirection : "row"}}>
            <Card key={index} id={item.id} name={item.name} />
          </View>
        );
      })}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: 'dodgerblue',
    height: 200,
    flex : 1,
    alignSelf : "center",
    justifyContent: 'center',
    alignItems: 'center',
    margin: 20,
  },
});

结果