در این قسمت از آموزش متنی قصد دارم کتابخانه react-native-swiper به شما معرفی و برای اون مثال بزنم. react-native-swiper یک کتابخانه مفید و ساده برای ساخت swiper (اسلایدر) برای دو پلتفرم Android و ios است که این امکان رو برای شما فراهم میکنه در سریع ترین زمان ممکن اسلایدر با ui مورد نظر خودتونو پیاده سازی کنید.
مراحل نصب:
برای نصب این کتابخانه کافیه کامند زیر را در مسیر پروژه خود نصب کنید:
1
npmireact-native-swiper--save
مثال:
برای استفاده از react-native-swiper کافیه کامپوننت (تگ) swiper از این کتابخانه import
1
import Swiper from'react-native-swiper'
و برای استفاده درون تگ swiper برای هر صفحه اسلایدر از کامپوننت View استفاده میکنیم. به انوان مثال برای نمایش سه صفحه کد زیر را کد نویسی میکنیم:
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام ببخشید من اپلیکیشنم رو RTL کردم بعدش این اسلایدر کلا خراب شده
به جای اینکه اون نقطه های پایین و جابجایی بین عکس ها از چپ به راست بشه ، از راست به چپ شده و اون نقطه ها هم به هم ریخته شما برای حل این مشکل چه راه حلی پیشنهاد میکنید ؟
سلام برشما.
از دستور زیر برای پاک کردن نود مودال استفاده
rm -rf node_modules
و برای نصب مجدد پکیج ها از دستور
npm install
و نهایتا
npm i react-native-swiper –save
ممنون آقا مهدی بابت راهنماییتون. دوستان برای کار کردن کتابخانه Swiper در ورژن های جدید react native این مراحل را انجام دهید.
۱- ابتدا کتابخانه react-native-community/viewpager@ را نصب کنید.
۲- به فایل index.js در مسیر node_modules\react-native-swiper\src\index.js رفته و خط import ViewPager from ‘@react-native-community/viewpager’ را در قسمت import ها اضافه کنید و کتابخانه ViewPagerAndroid را از قسمت import هاحذف کنید.
۳- در همین فایل به جای ViewPagerAndroid عبارت ViewPager را قرار دهید.
مراحل زیر رو طی کنید
ابتدا دستور npm i @react-native-community/viewpager رو اجرا کنید
برای ios
pod ‘react-native-viewpager’, :path => ‘../node_modules/@react-native-community/viewpager’ رو به Podfile اضافه کنید سپس
cd ios
pod install
برای Android در فایل android/settings.gradle
include ‘:@react-native-community_viewpager’
project(‘:@react-native-community_viewpager’).projectDir = new File(rootProject.projectDir, ‘../node_modules/@react-native-community/viewpager/android’)
و در فایل
android/app/build.gradle
سپس در android/app/src/main/…/MainApplication.java
در بالای فایل خط کد زیر را قرار دهید
import com.reactnativecommunity.viewpager.RNCViewPagerPackage;
و
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new RNCViewPagerPackage()
);
مشکلتون باید حل بشه
آقا پس چرا اینارو تو آموزش ساخت اپ دیجی کالا نگفتید
این که اصلا کامل نیست
شما هم خیلی گنگ توضیح دادید
دوست عزیز این مشکل به خاطر اپدیت جدید react native به وجود اومده و اگر issue های مربوط به کتابخونه رو چک کنید میبینید که این موضع توسط افراد دیگه بیان شده.وگرنه تا قبل از آپدیت شما نیاز به کار خاصی نداشتید و فقط کافی بوده دستور npm i react-native-swiper –save رو اجرا و از این کتابخانه استفاده کنید
لینک issue جهت اطلاع https://github.com/leecade/react-native-swiper/issues/1153
با تشکر از اشتراک گذاری شما،
من همین مراحل رو رفتم ولی خطای RNCViewPager was not found UIManager رو میده
سلام آقا مهدی خسته نباشی من ورژن ری اکت نیتوی که استفاده میکنم از 61 هستش اما وقتی از react native swiper استفاده می کنم همچین اروری میده invariant violatio : viewpagerandroid has been removed from react native
سلام علی عزیز.
سلامت باشی.به احتمال خیلی زیاد این کتابخونه از viewpagerandroid استفاده میکنه که این کامپوننت از هسته react native در نسخه 60 حذف شده و باید جداگونه نصب بشه. https://github.com/react-native-community/react-native-viewpager
و دلیل error هم همینه
سلام ببخشید من اپلیکیشنم رو RTL کردم بعدش این اسلایدر کلا خراب شده
به جای اینکه اون نقطه های پایین و جابجایی بین عکس ها از چپ به راست بشه ، از راست به چپ شده و اون نقطه ها هم به هم ریخته شما برای حل این مشکل چه راه حلی پیشنهاد میکنید ؟
سلام.میتونید از لینک زیر استفاده کنید
https://github.com/leecade/react-native-swiper/issues/314
بازم من مشکل دارم
http://s5.picofile.com/file/8396556000/bandicam_2020_05_09_17_37_43_579.png
این عکس دکمه هاشه که میخوام دکمه اکتیوش از راست شروع بشه
http://s4.picofile.com/file/8396556342/bandicam_2020_05_09_17_39_29_372.png
اینم کدمه
اینم اگر میشه ببینید کلا همه چیز برعکس اتفاق میوفته
http://s5.picofile.com/file/8396556584/bandicam_2020_05_09_17_41_00_723.mp4.html
الان rtl هست اپیکیشنتون؟
بله با دستور I18nManager.forceRTL انجامش دادم
نمیدونم والا.باید درست بشه با این ترفند
سلام برای نصب این react-native-swiper پکیج ارور میگیرم و نصب نمیشه. چرا ؟
دستور هم اینه : npm i react-native-swiper –save
ارور هم اینه : http://s10.picofile.com/file/8392708942/2.PNG
سلام برشما.
از دستور زیر برای پاک کردن نود مودال استفاده
rm -rf node_modules
و برای نصب مجدد پکیج ها از دستور
npm install
و نهایتا
npm i react-native-swiper –save
سلام. مهندس باز هم همون خطا رو میده. چکار کنیم؟
ممنون آقا مهدی بابت راهنماییتون. دوستان برای کار کردن کتابخانه Swiper در ورژن های جدید react native این مراحل را انجام دهید.
۱- ابتدا کتابخانه react-native-community/viewpager@ را نصب کنید.
۲- به فایل index.js در مسیر node_modules\react-native-swiper\src\index.js رفته و خط import ViewPager from ‘@react-native-community/viewpager’ را در قسمت import ها اضافه کنید و کتابخانه ViewPagerAndroid را از قسمت import هاحذف کنید.
۳- در همین فایل به جای ViewPagerAndroid عبارت ViewPager را قرار دهید.
ممنون مصطفی عزیز که راه حل این مشکل رو به اشتراک گذاشتی
آقا من این کارا رو انجام دادم ولی باز یه ارور دیگه میده.
http://s10.picofile.com/file/8392784242/2.PNG
مراحل زیر رو طی کنید getPackages() { asList(
ابتدا دستور npm i @react-native-community/viewpager رو اجرا کنید
برای ios
pod ‘react-native-viewpager’, :path => ‘../node_modules/@react-native-community/viewpager’ رو به Podfile اضافه کنید سپس
cd ios
pod install
برای Android در فایل android/settings.gradle
include ‘:@react-native-community_viewpager’
project(‘:@react-native-community_viewpager’).projectDir = new File(rootProject.projectDir, ‘../node_modules/@react-native-community/viewpager/android’)
و در فایل
android/app/build.gradle
سپس در android/app/src/main/…/MainApplication.java
در بالای فایل خط کد زیر را قرار دهید
import com.reactnativecommunity.viewpager.RNCViewPagerPackage;
و
@Override
protected List
return Arrays.
new MainReactPackage(),
new RNCViewPagerPackage()
);
مشکلتون باید حل بشه
آقا پس چرا اینارو تو آموزش ساخت اپ دیجی کالا نگفتید
این که اصلا کامل نیست
شما هم خیلی گنگ توضیح دادید
دوست عزیز این مشکل به خاطر اپدیت جدید react native به وجود اومده و اگر issue های مربوط به کتابخونه رو چک کنید میبینید که این موضع توسط افراد دیگه بیان شده.وگرنه تا قبل از آپدیت شما نیاز به کار خاصی نداشتید و فقط کافی بوده دستور npm i react-native-swiper –save رو اجرا و از این کتابخانه استفاده کنید
لینک issue جهت اطلاع
https://github.com/leecade/react-native-swiper/issues/1153
با تشکر از اشتراک گذاری شما،
من همین مراحل رو رفتم ولی خطای RNCViewPager was not found UIManager رو میده
سلام آقا مهدی خسته نباشی من ورژن ری اکت نیتوی که استفاده میکنم از 61 هستش اما وقتی از react native swiper استفاده می کنم همچین اروری میده invariant violatio : viewpagerandroid has been removed from react native
سلام علی عزیز.
سلامت باشی.به احتمال خیلی زیاد این کتابخونه از viewpagerandroid استفاده میکنه که این کامپوننت از هسته react native در نسخه 60 حذف شده و باید جداگونه نصب بشه.
https://github.com/react-native-community/react-native-viewpager
و دلیل error هم همینه
issue های کتابخونه رو بررسی کنید
به احتمال زیاد اونجا راه حل داده باشه
https://github.com/leecade/react-native-swiper/issues/1108
سلام راجع به آپدیت جدید ری اکت نویگیشن لطفا یه پست بذارید.ورژن 4 خیلی قرقاطی شده هرکاری میکنی ارور میده.ممنون
سلام امیر عزیز.
به زودی یک آموزش متنی در مورد آموزش react navigation 4 قرار میدیم و میتونی ازش استفاده کنی
مقاله آموزش کار با React navigation 4 منتشر شد
https://reactapp.ir/get-start-react-navigation-4/
عالی دمتون گرم ممنون