如何在每行中显示两列是 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,
  },
});

Answer 1

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

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

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

</ScrollView>

你的例子试试零食 here.

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,
  },
});

结果

如何在每行中显示两列是 Scrollview 而不是 Flatlist？反应本机

How to show two columns in each row is Scrollview not Flatlist? React Native

arrays

scrollview

array-map

react-native

react-native-flatlist