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

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

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

Yomna Raouf · 1 أغسطس 2021

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

يمكنك الحصوب عليه حسابيًا عن طريق ال 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}
           )
      }
	}
/>

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

بتاريخ 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

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

Yomna Raouf · 1 أغسطس 2021

بتاريخ 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

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

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

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

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

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

السؤال

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

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

Recommended Posts

Yomna Raouf

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

Yomna Raouf

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية