كيف يمكننى عرض سكرول فيو بشكل راسى ولكن تحتوى على عمودين وليس عمود واحد react native

أحمد عبد الله2 · 7 أغسطس 2021

اريد ان اقوم بعرض سكرول فيو تحتوى على عمودين متقابلين وليس عمود واحد هذا هو الكود

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

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

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

export default function CoulumnsInMap() {
  return (
    <ScrollView>
      {data.map((item, 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,
  },
});

يمكننى فعلها باستخدام فلات ليست عن طريق columnsNum = 2 ولكنى مضطر لان اقوم بعملها باستخدام ال map هل هناك طريقة لفعلها ؟؟ اريد ان اعرض فى كل صف عمودين وليس عمود واحد

تم التعديل في 7 أغسطس 2021 بواسطة أحمد ابراهيم عبد الله

Yomna Raouf · 7 أغسطس 2021

يمكنك القيام بذلك عن طريق استخدام ال attribute horizontal بالقيمة true و بعدها ضبط التنسيقات حتى تظهر بالشكل الذي تريده.

لاحظ المثال التالي:

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

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView horizontal={true} style={styles.scrollView}>
      <View> 
        {"L o r e m L o r e m L o r e m".split(" ").map(letter =>  (
          <Text style={styles.text}>{letter}</Text>) 
        )}
      </View>
      
      <View> 
        {"I p s u m I p s u m I p s u m".split(" ").map(letter =>  (
          <Text style={styles.text}>{letter}</Text>) 
        )}
      </View>
      
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
    
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  text: {
    display: "flex",
    flexDirection: "column",
    fontSize: 40,
    marginRight: "50px",
    marginLeft: "40px"
  },
});

export default App;

الناتج:

و لكن أنصحك باستخدام ال FlatList بدلًا من ال scrollView و هذا لأن ال FlatList لا تقوم بتحميل/عرض"render" جميع البيانات"العناصر الأبناء" في نفس الوقت و إنما تقوم بتحميلها بشكل lazy عند الحاجة لها فقط مما يجعلها أفضل من جهة الأداء على عكس ال ScrollView:

const renderItem = ({ item }) => {
    return (
      <Card key={item.id} id={item.id} name={item.name} />
    );
  };

<FlatList 
   data={data}
   numColumns={2}
   renderItem={renderItem}
/>

MoJaffer · 7 أغسطس 2021

تستطيع فعل ذلك عن طريق FlatList componnet حيث ستسمح لك بعرض البيانات بالشكل الذي تريده سواء افقي أو عمودي

طبعاً في البداية ستحتاج لعمل import للـ FlatList

import { FlatList } from "react-native"

الآن سنقوم بعمل بعض التعديلات على الكود الخاص بك :

export default function CoulumnsInMap() {
  const renderItem = ({ item }) => (
    <Card id={item.id} name={item.name} />
  );

  return (
      <FlatList
        data={data} /* هنا سنضغ البيانات الخاصة بك */
        renderItem={renderItem} /* تأخذ كل عنصر من البيانات وتقوم بعرضه */
        keyExtractor={item => item.id} /* تحديد المعرق */
        horizontal={false} /* هنا سنقوم بجعل عرض البيانات بشكل عرضي */
        numColumns={2} /* عدد الصفوف */
      />
  );
}