اذهب إلى المحتوى
  • 0

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

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

السؤال

السلام عليكم اريد ان اقوم بجلب الاندكس الخاص بال 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 

 

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

Recommended Posts

  • 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}
           )
      }
	}
/>

 

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

  • 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 

 

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

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...