• 1

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

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

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 هل هناك طريقة لفعلها ؟؟ اريد ان اعرض فى كل صف عمودين وليس عمود واحد 

تمّ تعديل بواسطة أحمد ابراهيم عبد الله
1 شخص أعجب بهذا

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1

يمكنك القيام بذلك عن طريق استخدام ال 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;

الناتج:

610e6f4e2a2d9_Annotation2021-08-07043147.thumb.png.85d2678052afb21c75d1570d0a778e9f.pngو لكن أنصحك باستخدام ال 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}
/>

  

2 اشخاص أعجبوا بهذا

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

تستطيع فعل ذلك عن طريق 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} /* عدد الصفوف */
      />
  );
}

معاينة

تمّ تعديل بواسطة MoJaffer

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن