كيف يمكننى عرض سكرول فيو بشكل راسى ولكن تحتوى على عمودين وليس عمود واحد 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} /* عدد الصفوف */
      />
  );
}

معاينة

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

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

السؤال

أحمد عبد الله2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

Yomna Raouf

رابط هذا التعليق

شارك على الشبكات الإجتماعية

MoJaffer

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية