معرفی React Native Elements

React Native Element یک ابزار برای طراحی UI (رابط کاربری) برای React Native است.یکی از اساسی ترین مسائل در اپلیکیشن ها بحث رابط کاربری است که تاثیر مستقیمی بر روی مفید بودن اپلیکیشن و راضی نگه داشتن کاربر است.اگر شما یک اپلیکیشن کاربردی با یک رابط کاربری ضعیف داشته باشید،شانسی برای رقابت و داشتن کاربر ندارید.از طرفی شما یک deadline برای تحویل پروژه دارید و باید طراحی رو به این زمان برسونید.در این مواقع میتونید از ابزار هایی مثل React Native Elements ، Native Base یا ابزارهای دیگه برای طراحی رابط کاربری استفاده کنید که هم سرعت کار رو بالا میبره و هم شما خیلی راحتتر میتونید UI جذاب طراحی کنید.قبلا ما یک دوره تحت عنوان آموزش Native Base آماده کردیم که میتونید این دوره رو مشاهده کنید و نحوه کار با این کتابخونه رو یاد بگیرید.

React Native Elements یک سری کامپوننت های مفید و قابل سفارشی سازی برای UI در اختیار شما قرار میده که از طریق این لینک میتونید github repo این ابزار رو چک کنید.

تقریبا بعد از یک سال توسعه اپلیکیشن با React Native من خیلی از کامپوننت ها رو بصورت تکراری برای برنامه های مختلف توسعه دادم و در برنامه های مختلف استفاده کردم و تکرارش کردم و مدت زمان زیادی برای این کار گذاشتم .تنها چیزی که من نیاز داشتم یک ابزار بود که این element ها رو داشته باشه و بدون تکرار استایل دهی در پروژه ها استفادش کنم.

برای مثال وقتی که قرار باشه یک Button در React Native طراحی کنید،الگویی شبیه زیر رو باید داشته باشید:

import React from ‘react'
import { TouchableHighlight, Text, StyleSheet } from ‘react-native’

let styles = {}

const Button = ({onPress}) => (
  <TouchableHighlight onPress={onPress}>
    <Text>Button Element</Text>
  </TouchableHighlight>
)
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/react-native-0-60-stable-version-is-launched/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://reactapp.ir/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://reactapp.ir/wp-content/uploads/react-native-4-300x210.png" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">همه چیز در مورد ورژن 0.60 React Native</div></div></div><div class="ctaButton"></div></div></a></div>
styles = StyleSheet.create({
  // A bunch of repetitive styling here, center text, background color etc...
})

import React from ‘react'

import { TouchableHighlight, Text, StyleSheet } from ‘react-native’

let styles = {}

const Button = ({onPress}) => (

<Text>Button Element</Text>

</TouchableHighlight>

)

styles = StyleSheet.create({

// A bunch of repetitive styling here, center text, background color etc...

})

سپس:

import Button from './pathtobutton'

1	import Button from './pathtobutton'

با React Native Elements شما خیلی راحت میتونید اینکار رو انجام بدید:

import { Button } from 'react-native-elements'

<Button title='Hello World!' onPress={someMethod} />

import { Button } from 'react-native-elements'

زمانی که شما یه box با یک سری استایل خاص میبینیدشاید فکر کنید که این استایل ها قابل تغییر نیست اما همه چیز قابل سفارشی سازی است.ایده React Native Elements طراحی ساختار کامپوننت ها است به این معنی که شما کنترل کامل بر طراحی کامپوننت ها دارید اما ساختار رو نمیتونید تغییر بدید.یعنی شما زمان کمتری برای تکرار استایل ها صرف میکنید و زمان بیشتری برای ساختن اپلیکیشن دارید.

React Native Elements برای افرادی که تازه کار با React Native رو شروع کردند خیلی مفیده چون بدون دانش در مورد استایل دهی میتونند رابط کاربری را ایجاد کنند.من توصیه میکنم که source این ابزار رو نگاه کنند و نحوه ایجاد کامپوننت ها و استایل دهی رو بررسی کنند.

امیدوارم که این مقاله برای شما مفید باشه و کمکی بهتون در طراحی رابط کاربری کرده باشه.اگر تجربه در زمینه استفاده از این ابزار رو دارید،در کامنت ها به اشتراک بزاریدش.