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

السؤال

نشر
import React from 'react';
import { Text, View } from 'react-native';

const useTypewriter = ({ text, time }) => {
	const [typewriter, setTypewriter] = React.useState('');
	const [index, setIndex] = React.useState(0);

	React.useEffect(() => {
		const interval = setInterval(() => {
			if (index == text.length) {
				clearInterval(interval);
			}

			setTypewriter(typewriter + text[index]);
			setIndex(index + 1);
		}, time);

		// قم بالمسح في حالة قام المكون بالخروج في وقت باكر
		return () => clearInterval(interval);
	}, [typewriter, index]);

	return typewriter;
};

function App() {
	const typewriter = useTypewriter({
		text: 'Welcome!',
		time: 200
	});

	return (
		<View style={{ padding: '20px' }}>
			<Text style={{ fontSize: '22px' }}>{typewriter}</Text>
		</View>
	);
}

أحاول إنشاء كاتبه لتكتب احرف الكلمة حرف بحرف، ولكنها لا تتوقف..

Recommended Posts

  • 0
نشر

الخطأ لديك فقط هو أنك لم تكتب كلمة return هنا 

if (index == text.length) {
  return clearInterval(interval); // حيث تقول عند تحقق الشرط أريد أن أقوم بإنها التحديث ولا يتم تنفيذ شيئ بعد هذا السطر
}

لكن بدون return ستنتهي بالفعل الحلقة وسيتم تنفيذ الآتي 

setTypewriter(typewriter + text[index]);
setIndex(index + 1);

مما سيؤدي إلى تنفيذ ال useEffect مرة أخرى.

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...