انتقال انیمیشن ها از thread جاوا اسکریپت به UI thread
برنامه کودک ها قسمت ضروری از هر رابط کاربری جاری به شمار می‌آیند طراحی سایت در مشهد و ارائه آنها به استفاده کننده با حدس هزینه ای که برای کوشش اپ داراست کاری میباشد که هر توسعه و گسترش دهنده ای می بایست آن را اجرا دهد.
Animation API به طور پیش فرض بر روی thread جاوا اسکریپت اعمال میگردد رایاپارس و به همین انگیزه نیز بقیه رندرها و اجرای کدها را مسدود می نماید. این به آن معناست که در صورتی در حین انجام مسدود خواهد شد برنامه کودکان شما کادر ها را رد می نماید. به همین انگیزه میباشد که ما درین قسمت قصد داریم برنامه کودکان های خویش را از thread جاوا اسکریپت به UI thread منتقل نمایید ahrefs و خبر بهتر درباره این مسئله این میباشد که فقط با یکسری خط کد میتوانید این فعالیت را به راحتی هرچه مجموع ایفا دهید.
کدهای ما قبل از تغییر تحول به صورت پایین میباشند:
Animated.timing(this.state.shakeAnimation, {
toValue: 0,
duration: 100
})
کدهای ما بعداز تغییر‌و تحول به صورت پایین خواهند بود:
Animated.timing(this.state.shakeAnimation, {
toValue: 0,
duration: 100,
useNativeDriver: true
})
به همین آسانی برنده شدیم این فعالیت را در قاب ورک React native ایفا دهیم.
داده های به یادماندنی – ذخیره امتیازهای بالا در قاب ورک React native
یکی‌از دیگر از مواقعی که شما می بایست در کادر ورک React native و برای تشکیل داد پروژه بازی به آن توجه داشته باشید احتکار کردن داده های به یاد ماندنی مانند بالاترین امتیاز یوزرها میباشد که پروژه هایی که با قاب ورک React native می سازید از التفات بسیار متعددی بهره مند خواهد بود. در قاب ورک React native شما یک سیستم ذخیره سازی کلید-مقدار فارغ از رمزگذاری دارید که به طور ناهمزمان اطلاعات را ذخیره می نماید. این سیستم AsyncStorage اسم داراست. کلاً پیشنهاد می‌کنیم برای پروژه های والا در قاب ورک React native از AsyncStorage به کارگیری نکنید البته در‌این پروژه بی آلایش ما می‌توانیم از این سیستم به کارگیری کنیم. چنانچه قصد دارید از این راه‌حل به کارگیری فرمائید اعتقاد نتایج فرمائید که سیستم های دیگر مانند Realm یا این که SQLite را نیز نظارت نموده اید.
روش به کارگیری از این سیستم در قاب ورک React native
در بالا می بایست فایلی را ذیل utils با اسم storage.js یا این که چیزی مشابه به‌این ساخت و ساز کنیم. در مجموع دو عملیات اساسی داریم که بایستی این شغل را اعمال دهیم که‌این دو عملیات ذخیره سازی و بازیابی داده ها است که ما این دو عملیات را با به کار گیری از AsyncStorage API جاری ساختن می‌دهیم.
این API کادر ورک React native دارنده دو روال داخلی میباشد که‌این دو عبارت اند از AsyncStorage.setItem() برای ذخیره سازی و AsyncStorage.getItem() برای بازیابی اطلاعات در قاب ورک React native میباشند. قطعه کدی که به‌دنبال برای شما میاوریم این عمل را به راحتی برای شما اجرا میدهد:
import { AsyncStorage } from \"react-native\";
export const storeData = async (key, value) => {
try {
await AsyncStorage.setItem(`@ColorBlinder:${key}`, String(value));
} catch (error) {
console.log(error);
};
export const retrieveData = async key => {
try {
const value = await AsyncStorage.getItem(`@ColorBlinder:${key}`);
if (value !== null) {
return value;
} catch (error) {
console.log(error);
};
ادامه قطعه کد بالا در کادر ورک React native
با افزودن قطعه کد بالا در کادر ورک React native ما در غایت دو تابع async خوا هیم داشت که می قدرت از آنها برای ذخیره سازی و ماندگاری اطلاعات در AsyncStorage بهره برد. اذن دهید تا متدهای نو خویش را import کرده و دو کلید که ماندگاری موقعیت ورقه بازی را نماد میدهند را اضافه کنیم:
import {
generateRGB,
mutateRGB,
storeData,
retrieveData
} from \"../../utilities\";
...
state = {
points: 0,
bestPoints: 0, // < new
timeLeft: 15,
bestTime: 0, // < new
...