آموزش React Native-ساخت منوی دایره ای (circular-action-menu)


منو
یکی از کاربرد های اصلی منو زمانی است که ما میخوایم یک سری آیتم به کاربر نشون بدیم و نمیخوایم فضای زیادی رو اشغال کنه.
یکی از کتابخونه هایی کاربردی که در این زمینه موجود هست react-native-circular-action-menu که ما تو این آموزش قصد داریم با استفاده از یک مثال این کتابخونه رو به شما آموزش بدیم.
برای شروع ابتدا کتابخانه react-native-circular-action-menu رو نصب میکنیم:
1 |
npm i react-native-circular-action-menu --save |
و برای نمایش آیکون از کتابخونه react-native-vector-icons استفاده میکنیم:
1 |
npm install --save react-native-vector-icons |
و لینک میکنیم
1 |
react-native link react-native-vector-icons |
برای آشنایی بیشتر با react-native-vector-icons اینجا کلیک کنید.
بعد از نصب کامل کتابخونه ها با استفاده از دستور زیر پروژه خودمونو اجرا میکنیم:
1 |
react-native run-android |
نوبت به کد نویسی شده.
ابتدا React و Component از کتابخانه React ایمپورت میکنیم:
1 |
import React, { Component } from 'react'; |
و کامپوننت Icon روهم از کتابخانه react-native-vector-icons به همین شکل:
1 |
import Icon from 'react-native-vector-icons/MaterialIcons'; |
نوبت به کتابخانه react-native-circular-action-menu رسیده که ایمپورتش کنیم:
1 |
import ActionButton from 'react-native-circular-action-menu'; |
کلاس خودمونو میسازیم و دو متد render و return رو صدا میزنیم:
1 2 3 4 5 6 7 8 9 |
export default class App extends Component { render() { return ( ); } } |
نوبت به ساخت دکمه menu شده. برای این کار از کامپوننت ActionButton استفاده میکنیم و با استفاده از پروپرتی buttonColor رنگ دکمه را تعیین میکنیم:
1 2 3 |
<ActionButton buttonColor="rgba(231,76,60,1)"> </ActionButton> |
حالا برای نمایش item های ActionButton (زیر منو های که بعد از کلید روی منوی اصلی نمایش داده میشوند) از کامپوننت ActionButton.Item استفاده میکنیم:
1 2 3 4 5 6 7 8 9 10 11 |
<ActionButton buttonColor="rgba(231,76,60,1)"> <ActionButton.Item> </ActionButton.Item> <ActionButton.Item> </ActionButton.Item> <ActionButton.Item> </ActionButton.Item> </ActionButton> |
در حال حاظر اگر شبیه ساز خودتونو reload کنید دکمه menu به شما نمایش داده میشود ولی زمانی که روی این دکمه کلیک کنید هیچ زیر منویی نخواهید داشت (در واقع زیر منو وجود دارد اما به دلیل اینکه مقداری وجود ندارد چیزی نمایش داده نمیشود).
برای این که زیر منو ها و Icon آنها نمایش داده شود درون ActionButton.Item از کامپوننت Icon استفاده میکنیم:
1 2 3 4 5 6 7 8 9 10 11 |
<ActionButton buttonColor="rgba(231,76,60,1)"> <ActionButton.Item> <Icon name="account-circle" size={35} color="#900"/> </ActionButton.Item> <ActionButton.Item> <Icon name="camera" size={35} color="#900"/> </ActionButton.Item> <ActionButton.Item> <Icon name="favorite" size={35} color="#900"/> </ActionButton.Item> </ActionButton> |
همچنین با استفاده از پروپرتی buttonColor رنگ هر زیر منو را جداگانه تغییر داد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ActionButton buttonColor="rgba(231,76,60,1)"> <ActionButton.Item buttonColor='#F3F781' title="New Task" onPress={() => alert("کلیک شد")}> <Icon name="account-circle" size={35} color="#900"/> </ActionButton.Item> <ActionButton.Item buttonColor='#F3F781' title="Notifications" onPress={() => alert("کلیک شد")}> <Icon name="camera" size={35} color="#900"/> </ActionButton.Item> <ActionButton.Item buttonColor='#F3F781' title="All Tasks" onPress={() => alert("کلیک شد")}> <Icon name="favorite" size={35} color="#900"/> </ActionButton.Item> </ActionButton> |
کد کامل (فایل App.js)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import React, { Component } from 'react'; import Icon from 'react-native-vector-icons/MaterialIcons'; import ActionButton from 'react-native-circular-action-menu'; export default class App extends Component { render() { return ( <ActionButton buttonColor="rgba(231,76,60,1)"> <ActionButton.Item buttonColor='#F3F781' title="New Task" onPress={() => alert("کلیک شد")}> <Icon name="account-circle" size={35} color="#900"/> </ActionButton.Item> <ActionButton.Item buttonColor='#F3F781' title="Notifications" onPress={() => alert("کلیک شد")}> <Icon name="camera" size={35} color="#900"/> </ActionButton.Item> <ActionButton.Item buttonColor='#F3F781' title="All Tasks" onPress={() => alert("کلیک شد")}> <Icon name="favorite" size={35} color="#900"/> </ActionButton.Item> </ActionButton> ); } } |
در اینجا جدولی از تمام پروپرتی ها مورد استفاده در این کتابخانه وجود داره که میتوننین ازش استفاده کنین:
پروپرتی برای ActionButton:
Property | Type | Default | Description |
---|---|---|---|
active | boolean | false | زمان لود صفحه زیر منو ها نمایش داده شوند {true} یا با زدن دکمه منو زیر منو نمایش داده شود {false} |
autoInactive | boolean | true | زمانی که روی زیر منو کلیک میکنید زیر منو پنهان شود {true} یا به همان شکل نمایش داده شود {false} |
position | string | “center” | موقعیت قرارگیری منو : left center and right |
radius | number | 100 | فاصله زیر منو از دکمه منو (مقدار 1 نزدیک ترین حالت) |
bgColor | string | “transparent” | رنگ پس زمینه تمام صفحه گوشی |
buttonColor | string | “rgba(0,0,0,1)” | رنگ دکمه منو |
btnOutRange | string | props.buttonColor | رنگ دکمه منو زمانی که روی آن کلیک میشود (زمانی که زیر منو ها نمایش داده میشوند) |
outRangeScale | number | 1 | اندازه دکمه منو زمانی که ری آن کلیک میشود (هرچه به 0 نزدیک تر اندازه آن کوچک تر) |
onPress | function | null | زمانی که دکمه منو کلیک میشود تابع را اجرا میکند |
onLongPress | function | null | زمانی که دکمه منو به مدت 2 ثانیه کلید شود تابع را اجرا میکند |
onOverlayPress | function | null | زمانی که زیر منو باز است هر جای صفحه کلیک شود تابع را اجرا میکند |
icon | Component | + | تعیین Icon دکمه اصلی |
backdrop | Component | false | مشخص کردن نوع پس زمینه (i.e. BlurView, VibrancyView) |
degrees | number | 135 | درجه چرخش icon دکمه منو |
پروپرتی برای ActionButton.Item:
Property | Type | Default | Description |
---|---|---|---|
onPress | func | null | زمانی که زیر منو کلیک میشود تابع را اجرا میکند |
buttonColor | string | same as + button | پس زمینه زیر منو |
startDegree | number | شروع چرخش زیر منو | |
endDegree | number | 720 | پایان چرخش زیر منو |
دیدگاهتان را بنویسید