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

منو

یکی از کاربرد های اصلی منو زمانی است که ما میخوایم یک سری آیتم به کاربر نشون بدیم و نمیخوایم فضای زیادی رو اشغال کنه.

یکی از کتابخونه هایی کاربردی که در این زمینه موجود هست react-native-circular-action-menu که ما تو این آموزش قصد داریم با استفاده از یک مثال این کتابخونه رو به شما آموزش بدیم.

برای شروع ابتدا کتابخانه react-native-circular-action-menu رو نصب میکنیم:

npm i react-native-circular-action-menu --save

1	npm i react-native-circular-action-menu --save

و برای نمایش آیکون از کتابخونه react-native-vector-icons استفاده میکنیم:

npm install --save react-native-vector-icons

1	npm install --save react-native-vector-icons

و لینک میکنیم

react-native link react-native-vector-icons

1	react-native link react-native-vector-icons

برای آشنایی بیشتر با react-native-vector-icons اینجا کلیک کنید.

بعد از نصب کامل کتابخونه ها با استفاده از دستور زیر پروژه خودمونو اجرا میکنیم:

react-native run-android

1	react-native run-android

نوبت به کد نویسی شده.

ابتدا React و Component از کتابخانه React ایمپورت میکنیم:

import React, { Component } from 'react';

1	import React, { Component } from 'react';

و کامپوننت Icon روهم از کتابخانه react-native-vector-icons به همین شکل:

import Icon from 'react-native-vector-icons/MaterialIcons';

1	import Icon from 'react-native-vector-icons/MaterialIcons';

نوبت به کتابخانه react-native-circular-action-menu رسیده که ایمپورتش کنیم:

import ActionButton from 'react-native-circular-action-menu';

1	import ActionButton from 'react-native-circular-action-menu';

کلاس خودمونو میسازیم و دو متد render و return رو صدا میزنیم:

export default class App extends Component {

  render() {
    return (

    );
  }

}

export default class App extends Component {

render() {

return (

);

}

نوبت به ساخت دکمه menu شده. برای این کار از کامپوننت ActionButton استفاده میکنیم و با استفاده از پروپرتی buttonColor رنگ دکمه را تعیین میکنیم:

<ActionButton buttonColor="rgba(231,76,60,1)">

        </ActionButton>

</ActionButton>

حالا برای نمایش item های ActionButton (زیر منو های که بعد از کلید روی منوی اصلی نمایش داده میشوند) از کامپوننت ActionButton.Item استفاده میکنیم:

<ActionButton buttonColor="rgba(231,76,60,1)">
          <ActionButton.Item>

          </ActionButton.Item>
          <ActionButton.Item>

          </ActionButton.Item>
          <ActionButton.Item>

          </ActionButton.Item>
</ActionButton>

<ActionButton.Item>

</ActionButton.Item>

<ActionButton.Item>

</ActionButton.Item>

<ActionButton.Item>

</ActionButton.Item>

</ActionButton>

در حال حاظر اگر شبیه ساز خودتونو reload کنید دکمه menu به شما نمایش داده میشود ولی زمانی که روی این دکمه کلیک کنید هیچ زیر منویی نخواهید داشت (در واقع زیر منو وجود دارد اما به دلیل اینکه مقداری وجود ندارد چیزی نمایش داده نمیشود).

برای این که زیر منو ها و Icon آنها نمایش داده شود درون ActionButton.Item از کامپوننت Icon استفاده میکنیم:

        <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>

<ActionButton.Item>

</ActionButton.Item>

<ActionButton.Item>

</ActionButton.Item>

<ActionButton.Item>

</ActionButton.Item>

</ActionButton>

همچنین با استفاده از پروپرتی buttonColor رنگ هر زیر منو را جداگانه تغییر داد:

      <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.Item buttonColor='#F3F781' title="New Task" onPress={() => alert("کلیک شد")}>

</ActionButton.Item>

<ActionButton.Item buttonColor='#F3F781' title="Notifications" onPress={() => alert("کلیک شد")}>

</ActionButton.Item>

<ActionButton.Item buttonColor='#F3F781' title="All Tasks" onPress={() => alert("کلیک شد")}>

</ActionButton.Item>

</ActionButton>

کد کامل (فایل App.js)

flexDirection در react native

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>
    );
  }

}

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.Item buttonColor='#F3F781' title="New Task" onPress={() => alert("کلیک شد")}>

</ActionButton.Item>

<ActionButton.Item buttonColor='#F3F781' title="Notifications" onPress={() => alert("کلیک شد")}>

</ActionButton.Item>

<ActionButton.Item buttonColor='#F3F781' title="All Tasks" onPress={() => alert("کلیک شد")}>

</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	پایان چرخش زیر منو