• 0

كيف يمكننى جلب ال current index فى flatlist react native

السلام عليكم اريد ان اقوم بجلب الاندكس الخاص بال item المعروض هذا هو كودى

 

  const [index, setIndex] = useState(0);

 

<FlatList
          ref={refContainer}
          data={introScreenData}
          keyExtractor={(item, index) => item.id.toString()}
          style={styles.flatList}
          renderItem={({item, index}) => (
            <IntroScreenCard
              image={item.image}
              id={item.id}
              title={item.title}
              subTitle={item.subTitle}
            />

 

واريد ان اقوم بتحيث الاندكس فى كل مرة اقومفيها بعمل scroll 

 

1 شخص أعجب بهذا

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


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

يمكنك القيام بذلك بعدة طرق، منها:

يمكنك الحصوب عليه حسابيًا عن طريق ال scroll view offset إذا كنت تعرف ال layout الخاص بكل عنصر

<FlatList
  ref={refContainer}
  data={introScreenData}
  keyExtractor={(item, index) => item.id.toString()}
  style={styles.flatList}
  onScroll={(e)=>{
     let offset = e.nativeEvent.contentOffset.y;
     let index = parseInt(offset / height);   //  cell هنا هو ارتفاع ال height 
     console.log("now index is " + index)
     setIndex(index)
	}}
  renderItem={({item, index}) => (
    <IntroScreenCard
    image={item.image}
    id={item.id}
    title={item.title}
    subTitle={item.subTitle})
	}
/>

-- لا تنسى طرح ال layout الخاص بال header إذا كان لديك header 

أو يمكنك استخدام الطريقة التالية:

<FlatList
  ref={refContainer}
  data={introScreenData}
  keyExtractor={(item, index) => item.id.toString()}
  style={styles.flatList}
  renderItem={({item, index}) => {
    console.log(index);
    setIndex(index)
    return ( <IntroScreenCard
      image={item.image}
      id={item.id}
      title={item.title}
      subTitle={item.subTitle}
           )
      }
	}
/>

 

1 شخص أعجب بهذا

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 22 دقائق مضت قال Yomna Raouf:

يمكنك القيام بذلك بعدة طرق، منها:

يمكنك الحصوب عليه حسابيًا عن طريق ال scroll view offset إذا كنت تعرف ال layout الخاص بكل عنصر


<FlatList
  ref={refContainer}
  data={introScreenData}
  keyExtractor={(item, index) => item.id.toString()}
  style={styles.flatList}
  onScroll={(e)=>{
     let offset = e.nativeEvent.contentOffset.y;
     let index = parseInt(offset / height);   //  cell هنا هو ارتفاع ال height 
     console.log("now index is " + index)
     setIndex(index)
	}}
  renderItem={({item, index}) => (
    <IntroScreenCard
    image={item.image}
    id={item.id}
    title={item.title}
    subTitle={item.subTitle})
	}
/>

-- لا تنسى طرح ال layout الخاص بال header إذا كان لديك header 

أو يمكنك استخدام الطريقة التالية:


<FlatList
  ref={refContainer}
  data={introScreenData}
  keyExtractor={(item, index) => item.id.toString()}
  style={styles.flatList}
  renderItem={({item, index}) => {
    console.log(index);
    setIndex(index)
    return ( <IntroScreenCard
      image={item.image}
      id={item.id}
      title={item.title}
      subTitle={item.subTitle}
           )
      }
	}
/>

 

للاسف انه يقوم بطباعة كل ال indexes وليس الدى انا واقف عليه

هدا هو الكود بالكامل 
 

import React, {useState, useRef, useEffect} from 'react';
import {
  StyleSheet,
  View,
  FlatList,
  Dimensions,
  Text,
  SafeAreaView,
} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';

import IntroScreenCard from './IntroScreenCard';
import {introScreenData} from './introScreenData';

const phoneWidth = Dimensions.get('screen').width;
const phoneHeight = Dimensions.get('screen').height;

function IntroScreen() {
  const [index, setIndex] = useState(0);

  const screenRef = useRef();

  useEffect(() => {
    screenRef.current.scrollToIndex({animated: true, index}); // تغيير على حسب قيمة ستايت
  }, [index]);

  // const theNext = () => {
  //   if (index < introScreenData.length - 1) {
  //     setIndex(index + 1);
  //   }
  // };

  const Dots = () => {
    return (
      <View
        style={{
          width: 50,
          height: 30,
          backgroundColor: 'aqua',
          flexDirection: 'row',
          alignSelf: 'center',
          alignItems: 'center',
        }}>
        <Icon name="dot-circle-o" color="gray" size={20} />
        <Icon name="dot-circle-o" color="gray" size={20} />
        <Icon name="dot-circle-o" color="black" size={20} />
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.con}>
      <View style={styles.con}>
        <Text
          onPress={() => {
            console.log(index);
          }}
          style={styles.skipButton}>
          تخطى
        </Text>

        <FlatList
          ref={screenRef}
          data={introScreenData}
          keyExtractor={(item, index) => item.id.toString()}
          style={styles.flatList}
          renderItem={({item, index}) => {
            console.log(index);

            return (
              <IntroScreenCard
                image={item.image}
                id={item.id}
                title={item.title}
                subTitle={item.subTitle}
                visible={item.hasButton}
              />
            );
          }}
          horizontal
          pagingEnabled //تفعيل خاصية التمرير
          showsHorizontalScrollIndicator={false} // محدد التمرير
          initialScrollIndex={index}
          // onScroll={() => setIndex(index + 1)}
        />
        <Dots />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  con: {
    flex: 1,
    backgroundColor: `white`,
  },
  flatList: {
    flex: 1,
    marginVertical: phoneHeight * 0.1,
  },
  skipButton: {
    color: 'gray',
    fontSize: 16,
    marginLeft: phoneWidth * 0.07,
  },
});
export default IntroScreen;


أتمنى المساعدة

بتاريخ 22 دقائق مضت قال Yomna Raouf:

يمكنك القيام بذلك بعدة طرق، منها:

يمكنك الحصوب عليه حسابيًا عن طريق ال scroll view offset إذا كنت تعرف ال layout الخاص بكل عنصر


<FlatList
  ref={refContainer}
  data={introScreenData}
  keyExtractor={(item, index) => item.id.toString()}
  style={styles.flatList}
  onScroll={(e)=>{
     let offset = e.nativeEvent.contentOffset.y;
     let index = parseInt(offset / height);   //  cell هنا هو ارتفاع ال height 
     console.log("now index is " + index)
     setIndex(index)
	}}
  renderItem={({item, index}) => (
    <IntroScreenCard
    image={item.image}
    id={item.id}
    title={item.title}
    subTitle={item.subTitle})
	}
/>

-- لا تنسى طرح ال layout الخاص بال header إذا كان لديك header 

أو يمكنك استخدام الطريقة التالية:


<FlatList
  ref={refContainer}
  data={introScreenData}
  keyExtractor={(item, index) => item.id.toString()}
  style={styles.flatList}
  renderItem={({item, index}) => {
    console.log(index);
    setIndex(index)
    return ( <IntroScreenCard
      image={item.image}
      id={item.id}
      title={item.title}
      subTitle={item.subTitle}
           )
      }
	}
/>

 

ما احاول فعله هو onboarding screen 

تمّ تعديل بواسطة أحمد ابراهيم عبد الله

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 8 دقائق مضت قال أحمد ابراهيم عبد الله:

للاسف انه يقوم بطباعة كل ال indexes وليس الدى انا واقف عليه

هدا هو الكود بالكامل 
 


import React, {useState, useRef, useEffect} from 'react';
import {
  StyleSheet,
  View,
  FlatList,
  Dimensions,
  Text,
  SafeAreaView,
} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';

import IntroScreenCard from './IntroScreenCard';
import {introScreenData} from './introScreenData';

const phoneWidth = Dimensions.get('screen').width;
const phoneHeight = Dimensions.get('screen').height;

function IntroScreen() {
  const [index, setIndex] = useState(0);

  const screenRef = useRef();

  useEffect(() => {
    screenRef.current.scrollToIndex({animated: true, index}); // تغيير على حسب قيمة ستايت
  }, [index]);

  // const theNext = () => {
  //   if (index < introScreenData.length - 1) {
  //     setIndex(index + 1);
  //   }
  // };

  const Dots = () => {
    return (
      <View
        style={{
          width: 50,
          height: 30,
          backgroundColor: 'aqua',
          flexDirection: 'row',
          alignSelf: 'center',
          alignItems: 'center',
        }}>
        <Icon name="dot-circle-o" color="gray" size={20} />
        <Icon name="dot-circle-o" color="gray" size={20} />
        <Icon name="dot-circle-o" color="black" size={20} />
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.con}>
      <View style={styles.con}>
        <Text
          onPress={() => {
            console.log(index);
          }}
          style={styles.skipButton}>
          تخطى
        </Text>

        <FlatList
          ref={screenRef}
          data={introScreenData}
          keyExtractor={(item, index) => item.id.toString()}
          style={styles.flatList}
          renderItem={({item, index}) => {
            console.log(index);

            return (
              <IntroScreenCard
                image={item.image}
                id={item.id}
                title={item.title}
                subTitle={item.subTitle}
                visible={item.hasButton}
              />
            );
          }}
          horizontal
          pagingEnabled //تفعيل خاصية التمرير
          showsHorizontalScrollIndicator={false} // محدد التمرير
          initialScrollIndex={index}
          // onScroll={() => setIndex(index + 1)}
        />
        <Dots />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  con: {
    flex: 1,
    backgroundColor: `white`,
  },
  flatList: {
    flex: 1,
    marginVertical: phoneHeight * 0.1,
  },
  skipButton: {
    color: 'gray',
    fontSize: 16,
    marginLeft: phoneWidth * 0.07,
  },
});
export default IntroScreen;


أتمنى المساعدة

ما احاول فعله هو onboarding screen 

هل قمت بتجربة هذه الطريقة

بتاريخ 28 دقائق مضت قال Yomna Raouf:

يمكنك القيام بذلك بعدة طرق، منها:

يمكنك الحصوب عليه حسابيًا عن طريق ال scroll view offset إذا كنت تعرف ال layout الخاص بكل عنصر


<FlatList
  ref={refContainer}
  data={introScreenData}
  keyExtractor={(item, index) => item.id.toString()}
  style={styles.flatList}
  onScroll={(e)=>{
     let offset = e.nativeEvent.contentOffset.y;
     let index = parseInt(offset / height);   //  cell هنا هو ارتفاع ال height 
     console.log("now index is " + index)
     setIndex(index)
	}}
  renderItem={({item, index}) => (
    <IntroScreenCard
    image={item.image}
    id={item.id}
    title={item.title}
    subTitle={item.subTitle})
	}
/>

-- لا تنسى طرح ال layout الخاص بال header إذا كان لديك header 

 

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 55 دقائق مضت قال Yomna Raouf:

هل قمت بتجربة هذه الطريقة

 

جربتها والاندكس دائما يظهر بصفر

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


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

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

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

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


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

تسجيل الدخول

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


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