كيف أجعل index الخاص ب FlatList يتغير عندما أضغط على زر معين بدلا من السحب ؟

بتاريخ 15 ساعات قال Ahmed Sawy:

حل رائع لكن اعتقد ان به خطأ لانه ظهر لى هذا الخطأ 
 

flatListRef.scrollToIndex is not a function. (In 'flatListRef.scrollToIndex({
        index: index,
        animated: true
      })', 'flatListRef.scrollToIndex' is undefined)

 

لقد قمت بتعديل الإجابة. يجب أن نستخدم الـ references بإستخدام current:

flatListRef.current.scrollToIndex({ ... })

يمكنك إستخدام scrollToIndex وهي method جاهزة تأتي مع FlatList للذهاب إلى index معين.

لاحظ أن scrollToIndex تأخذ object وليس رقم. فيمكنك إعطائها object وبداخل هذا الـ object ستضع property إسمها index تساوي الـ index التالي.

أولاً، يجب عليك أن تحصل على reference للـ FlatList عن طريق useRef هكذا:

function App() {
	const flatListRef = React.useRef(null);
	const [index, setIndex] = React.useState(0);

	const goForward = () => {
		setIndex(index + 1);
		flatListRef.scrollToIndex({ index: index, animated: true });
	};

	return (
		<FlatList
			ref={flatListRef}
			data={cakes}
			renderItem={renderItem}
		/>
	);
}

يوجد لدى FlatList الكثير من الـ methods والخصائص. يمكنك دائماً أن تتفقد صفحة الـ API لهذا الـ component من هنا.

يمكنك انشاء مرجع له علاقة ب flatlist وذلك لتتمكن من الوصول للخاصية scrollToIndex ثم تقوم بتغيير ال state باستخدام الأزرار و هكذا scrollToIndex ستحصل على القيمة index داخل useeffect

function MainScreen() {
  const [index, setIndex] = useState(0);
  
  const refContainer = useRef();// أنشئ مرجع 
  
  useeffect(()=> {// 
   refContainer.current.scrollToIndex({ animated: true, index }); // تغيير على حسب قيمة ستايت
  },[index])

  

  return (
    <View style={styles.con}>

      <Button title="Next" onPress={() => setIndex(index +1)} /> 
	 <Button title="Previous" onPress={() => setIndex(index -1)} /> 

      <FlatList
		ref={refContainer} //مرجع 
        data={data} 
        keyExtractor={(item) => item.id.toString()}
        style={{
          flex: 1,
          marginVertical: phoneHeight * 0.15,
        }}
        renderItem={
          ({item}) => <ScrollerCakes image={item.image} title={item.title} /> 
        }
        pagingEnabled 
        horizontal 
        showsHorizontalScrollIndicator={false} 
        initialScrollIndex={index}  
      />
    </View>
  );
}

بتاريخ 16 ساعات قال إسلام عبدالعزيز:

يمكنك إستخدام scrollToIndex وهي method جاهزة تأتي مع FlatList للذهاب إلى index معين.

لاحظ أن scrollToIndex تأخذ object وليس رقم. فيمكنك إعطائها object وبداخل هذا الـ object ستضع property إسمها index تساوي الـ index التالي.

أولاً، يجب عليك أن تحصل على reference للـ FlatList عن طريق useRef هكذا:

function App() {
	const flatListRef = React.

بتاريخ 16 ساعات قال إسلام عبدالعزيز:

يمكنك إستخدام scrollToIndex وهي method جاهزة تأتي مع FlatList للذهاب إلى index معين.

لاحظ أن scrollToIndex تأخذ object وليس رقم. فيمكنك إعطائها object وبداخل هذا الـ object ستضع property إسمها index تساوي الـ index التالي.

أولاً، يجب عليك أن تحصل على reference للـ FlatList عن طريق useRef هكذا:

function App() {
	const flatListRef = React.useRef(null);
	const [index, setIndex] = React.useState(0);

	const goForward = () => {
		setIndex(index + 1);
		flatListRef.scrollToIndex({ index: index, animated: true });
	};

	return (
		<FlatList
			ref={flatListRef}
			data={cakes}
			renderItem={renderItem}
		/>
	);
}

يوجد لدى FlatList الكثير من الـ methods والخصائص. يمكنك دائماً أن تتفقد صفحة الـ API لهذا الـ component من هنا.

حل رائع لكن اعتقد ان به خطأ لانه ظهر لى هذا الخطأ 

flatListRef.scrollToIndex is not a function. (In 'flatListRef.scrollToIndex({
        index: index,
        animated: true
      })', 'flatListRef.scrollToIndex' is undefined)