در این مقاله قصد داریم به معرفی ری اکت نیتیو المنتس ( react native elements ) بپردازیم و ببینیم چگونه میتوان و با این ابزار کار کنیم و قابلیت های این ابزار چیست؟ بعد از پاسخ به سوال قبل یک مثال ساده از کار با react native elements میبینیم و با نحوه کار آن به طور کامل آشنا می شویم.

 

react native elements چیست و چه ویژگی هایی دارد؟

در حقیقت میتوان گفت که هدف react native elements ارائه یک کیت کامل UI است. این کیت برای ساخت اپلیکیشن در ری اکت نیتیو استفاده می شود. تعداد بسیار زیادی components بسیار عالی و قدرتمند وجود دارد که توسط برنامه نویسان بسیار حرفه ای در سراسر دنیا نوشته شده است. در react native elements عذاب کنار هم قرار دادن و اسمبل کردن این پکیج ها را با دادن یک API ثابت و آماده به حداقل رسانده و ظاهر و کارکرد بسیار خوبی را برای کاربران ایجاد میکند.

 

چگونه react native elements را نصب کنیم؟

نحوه نصب react native elements بستگی به نوع react native پروژه شما دارد و به دو صورت میتواند انجام گیرد. این دو صورت شامل :

  1. Expo | React Native App
  2. React Native CLI

EXPO و یا پروژه های React Native App که شامل یک react native vector icons در بیرون از Box است یکی از مراحل اصلی را پشت سر گذاشته است. پس تنها چیزی که شما لازم دارید استفاده از react native elements است و فقط باید react native elements را نصب کنید.

yarn add react-native-elements

# or with npm

npm install react-native-elements

اما اگر برنامه شما یک برنامه ری اکت نیتیو استاندارد است و از react-native init استفاده کرده اید. برای نصب react native elements باید مراحل زیر را انجام دهید.

گام اول این است که ابتدا react native elements را نصب کنید. برای اینکار از کد زیر استفاده کنید.

yarn add react-native-elements

# or with npm

npm i react-native-elements --save

حال که react native elements را نصب کردید باید react native vector icons را به عنوان یک افزونه نصب کنید. اگر از قبل این کار را انجام دادید میتوانید این مرحله را نادیده بگیرید. همچنین در صورتی که از react native 0.60.0 و یا نسخه های بالاتر آن استفاده میکنید نیز نیازی به نصب این پکیج ندارید زیرا به صورت اتوماتیک این پکیج برای شما نصب می شود.

# yarn

yarn add react-native-vector-icons

# or with npm

npm i --save react-native-vector-icons



# link

react-native link react-native-vector-icons

نحوه استفاده از react native elements

کامپوننت های استفاده شده در این کتابخانه یک تم مشخص برای اجرا دارند. در واقع ما از یک مکان میتوانیم رنگ تمام کامپوننت های استفاده شده را بروز کنیم و حقیقت این است که این ویژگی، ویژگی بسیار خاص و خوبی برای توسعه دهندگان این کتابخانه است اما از طرفی نیز این ویژگی باعث می شود کاربران به یک روش برای استفاده از این ویژگی نیاز داشته باشند. در حقیقت ایده ساخت react native elements از پشت همین استفاده از یک تم آمده است و از اینجاست که برنامه نویسان به ساخت و تولد react native elements فکر کرده اند.

import { Button, ThemeProvider } from 'react-native-elements';



const MyApp = () => {

return (

<ThemeProvider>

<Button title="Hey!" />

</ThemeProvider>

);

};

استفاده از react native elements در پروژه

در پایین برنامه ای را مشاهده میکنید که یک ساید منو را با استفاده از توانایی های بسیار قوی react native elements میسازد.

import { SideMenu, List, ListItem } from 'react-native-elements'



constructor () {

super()

this.state = {

isOpen: false

}

this.toggleSideMenu = this.toggleSideMenu.bind(this)

}



toggleSideMenu () {

this.setState({

isOpen: !this.state.isOpen

})

}



render () {

const MenuComponent = (

<View style={{flex: 1, backgroundColor: '#ededed', paddingTop: 50}}>

<List containerStyle={{marginBottom: 20}}>

{

list.map((l, i) => (

<ListItem

roundAvatar

onPress={() => console.log('Pressed')}

avatar={l.avatar_url}

key={i}

title={l.name}

subtitle={l.subtitle}

/>

))

}

</List>

</View>

)



return (

<SideMenu

isOpen={this.state.isOpen}

menu={MenuComponent}>

<App toggleSideMenu={this.toggleSideMenu.bind(this)} />

</SideMenu>

)

}

نتیجه کد بالا تصویری به شکل زیر است.

در این آموزش دیدیم که چگونه میتوانیم react native elements را نصب کنیم و شروع به استفاده از آن کرده و به سادگی با این ابزار قدرتمند UI های زیبایی را طراحی کرده و به اپلیکیشن خود جلوه بهتری را اهدا کنیم.