آشنایی با React Native (بخش دوم : کامپوننت ها و API)
فهرست مطالب
آخرین به روزرسانی در 21/10/2022
در بخش دوم آشنایی و آموزش ری اکت نیتیو قرار داریم.
در بخش اول آموزش ما به آموزش اصول و موارد پایه ی این فریمورک پرداختیم.
و از ویژگی ها و نحوه ی نصب آن تا برخی از توابع و دستورات مهم آن را شرح دادیم.
در بخش دوم آموزش ما قصد داریم به صورت تخصصی در رابطه با کامپوننت ها و api ری اکت نیتیو صحبت کنیم.
پس با ما همراه باشید.
پیش نیاز این مقاله تسلط و آشنایی با بخش اول آموزش React Native می باشد.
لازم به ذکر است این یک مقاله ی تخصصی می باشد و برای افراد مبتدی در برنامه نویسی چندان مناسب نبوده و ممکن است برخی از بخش های آن برای آن ها مفهوم نباشد.
به همین علت پیشنهاد می شود برای مطالعه و درک کامل این آموزش و آشنایی به زبان حاوا اسکریپت تسلط نسبی داشته باشید.
View
View رایج ترین المان در React Native است.
می توانید آن را معادل المان div مورد استفاده در توسعه وب در نظر بگیرید.
کاربرد View
اجازه دهید اکنون چند مورد استفاده رایج را ببینیم :
هنگامی که نیاز دارید المان خود را در داخل کانتینر بگذارید ، می توانید از View به عنوان یک المان کانتینر استفاده کنید.
وقتی میخواهید المان های بیشتری را درون المان والد قرار دهید ، هم والد و هم فرزند میتوانند View باشند.
می تواند به تعداد دلخواه child داشته باشد.
وقتی میخواهید به المان های مختلف استایل بدهید ، میتوانید آنها را در View قرار دهید زیرا از ویژگی style، flexbox و … پشتیبانی میکند.
View همچنین از synthetic touch events پشتیبانی می کند که می تواند برای اهداف مختلف مفید باشد.
ما قبلاً از View در قسمت اول آموزش ری اک نیتیو خود استفاده کرده ایم و تقریباً در تمام بخش های بعدی نیز از آن استفاده خواهیم کرد.
View را می توان به عنوان یک المان پیش فرض در React Native در نظر گرفت.
در مثالی که در زیر آورده شده است، ما دو View و یک متن را تودرتو خواهیم کرد.
import React, { Component } from 'react'
import { View, Text } from 'react-native'
const App = () => {
return (
This is my text
)
}
export default App
WebView
در این FOA نحوه استفاده از WebView را یاد خواهیم گرفت.
وب ویویزمانی استفاده می شود که می خواهید صفحه وب را به صورت درون خطی در برنامه تلفن همراه خود رندر کنید.
(برای آشنایی بیشتر با اپلیکیشن های وب ویو می توانید از لینک آن استفاده کنید.)
با استفاده از WebView
HomeContainer یک کامپوننت کانتینر خواهد بود.
import React, { Component } from 'react'
import WebViewExample from './web_view_example.js'
const App = () => {
return (
)
}
export default App;
اجازه دهید یک فایل جدید به نام WebViewExample.js در داخل پوشه src/components/home ایجاد کنیم.
import React, { Component } from 'react'
import { View, WebView, StyleSheet }
from 'react-native'
const WebViewExample = () => {
return (
)
}
export default WebViewExample;
const styles = StyleSheet.create({
container: {
height: 350,
}
})
خروجی :
Modal
در این بخش ، نحوه استفاده از کامپوننت مدال در React Native را به شما نشان خواهیم داد.
اجازه دهید اکنون یک فایل جدید ، تحت عنوان ModalExample.js ایجاد کنیم.
ما logic را داخل ModalExample قرار می دهیم.
با اجرای toggleModal می توانیم حالت اولیه را به روز کنیم.
پس از به روز رسانی حالت اولیه با اجرای toggleModal، ویژگی قابل مشاهده را روی modal خود قرار می دهیم.
هنگامی که state تغییر کند، این پایه به روز می شود.
onRequestClose برای دستگاههای Android مورد نیاز است.
App.js
import React, { Component } from 'react'
import WebViewExample from './modal_example.js'
const Home = () => {
return (
)
}
export default Home;
modal_example.js
import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View, StyleSheet}
from 'react-native'
class ModalExample extends Component {
state = {
modalVisible: false,
}
toggleModal(visible) {
this.setState({ modalVisible: visible });
}
render() {
return (
{ console.log("Modal has been closed.") } }>
Modal is open!
{
this.toggleModal(!this.state.modalVisible)}}>
Close Modal
{this.toggleModal(true)}}>
Open Modal
)
}
}
export default ModalExample
const styles = StyleSheet.create ({
container: {
alignItems: 'center',
backgroundColor: '#ede3f2',
padding: 100
},
modal: {
flex: 1,
alignItems: 'center',
backgroundColor: '#f7021a',
padding: 100
},
text: {
color: '#3f2949',
marginTop: 10
}
})
صفحه شروع ما به این شکل خواهد بود :
اگر روی دکمه کلیک کنیم، مدال باز می شود :
ActivityIndicator
در این بخش به شما نشان خواهیم داد که چگونه از ActivityIndicator در React Native استفاده کنید.
مرحله ۱ : App
کامپوننت App برای وارد کردن و نشان دادن ActivityIndicator ما استفاده خواهد شد.
App.js
import React from 'react'
import ActivityIndicatorExample from './activity_indicator_example.js'
const Home = () => {
return (
)
}
export default Home
مرحله ۲ : ActivityIndicatorExample
ویژگی Animating یک Boolean است که برای نشان دادن ActivityIndicator استفاده می شود.
دومی شش ثانیه پس از نصب قطعه بسته می شود.
این کار با استفاده از تابع ()closeActivityIndicator انجام می شود.
activity_indicator_example.js
import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
class ActivityIndicatorExample extends Component {
state = { animating: true }
closeActivityIndicator = () => setTimeout(() => this.setState({
animating: false }), 60000)
componentDidMount = () => this.closeActivityIndicator()
render() {
const animating = this.state.animating
return (
)
}
}
export default ActivityIndicatorExample
const styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 70
},
activityIndicator: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
height: 80
}
})
وقتی app را اجرا می کنیم ، لودر را روی صفحه می بینیم.
پس از شش ثانیه ناپدید می شود.
Picker
در این بخش ، Picker ساده را با دو گزینه موجود ایجاد خواهیم کرد.
مرحله ۱ : ایجاد فایل
در اینجا، پوشه App.js به عنوان یک کامپوننت نمایشی استفاده خواهد شد.
App.js
import React from 'react'
import PickerExample from './PickerExample.js'
const App = () => {
return (
)
}
export default App
مرحله ۲ : Logic
this.state.user برای picker control استفاده می شود.
تابع updateUser با انتخاب کاربر فعال می شود.
PickerExample.js
خروجی :
اگر روی name کلیک کنید، هر سه گزینه را به صورت − از شما می خواهد
و شما می توانید یکی از آنها را انتخاب کنید و خروجی به صورت زیر خواهد بود.
Status Bar
در این بخش ، نحوه کنترل status bar appearance در React Native را به شما نشان خواهیم داد.
استفاده از status bar آسان است و تنها کاری که باید انجام دهید این است که ویژگی ها را برای تغییر آن تنظیم کنید.
از ویژگی hidden می توان برای مخفی کردن status bar استفاده کرد.
در مثال زیر status bar ما روی false تنظیم شده است.
این مقدار پیش فرض است.
barStyle میتواند سه مقدار داشته باشد :
- dark-content
- light-content
- default
این کامپوننت دارای چندین ویژگی دیگر است که می توان از آنها استفاده کرد.
برخی از آنها مختص اندروید یا IOS هستند.
می توانید آن را در official documentation بررسی کنید.
App.js
import React, { Component } from 'react';
import { StatusBar } from 'react-native'
const App = () => {
return (
)
}
export default App
مرحله ۲ : Logic
this.state.user برای picker control استفاده می شود.
تابع updateUser با انتخاب کاربر فعال می شود.
PickerExample.js
اگر app را اجرا کنیم، status bar قابل مشاهده است و content رنگ تیره خواهد داشت.
Switch
در این بخش ، کامپوننت Switch را در چند مرحله توضیح خواهیم داد.
مرحله ۱ : ایجاد فایل
ما از کامپوننت HomeContainer برای logic استفاده خواهیم کرد ، اما باید مؤلفه presentational را ایجاد کنیم.
اجازه دهید اکنون یک فایل جدید ایجاد کنیم : SwitchExample.js
مرحله ۲ : Logic
ما در حال انتقال مقدار از state و توابع برای تغییر آیتم های switch به کامپوننت SwitchExample هستیم.
از Toggle functions برای بهروزرسانی state استفاده میشود.
import React, { Component } from 'react'
import { View } from 'react-native'
import SwitchExample from './switch_example.js'
export default class HomeContainer extends Component {
constructor() {
super();
this.state = {
switch1Value: false,
}
}
toggleSwitch1 = (value) => {
this.setState({switch1Value: value})
console.log('Switch 1 is: ' + value)
}
render() {
return (
);
}
}
مرحله ۳ : Presentation
کامپوننت Switch دو پایه دارد.
پایه onValueChange پس از فشار دادن سوئیچ توسط کاربر ، toggle functions ما را فعال می کند.
مقدار prop به state کامپوننت HomeContainer محدود می شود.
switch_example.js
import React, { Component } from 'react'
import { View, Switch, StyleSheet }
from 'react-native'
export default SwitchExample = (props) => {
return (
)
}
const styles = StyleSheet.create ({
container: {
flex: 1,
alignItems: 'center',
marginTop: 100
}
})
اگر سوئیچ را فشار دهیم ، state به روز می شود. می توانید مقادیر را در کنسول بررسی کنید.
خروجی :
Text
در این بخش در مورد کامپوننت Text در React Native صحبت خواهیم کرد.
این کامپوننت می تواند تودرتو باشد و می تواند خواص را از والدین به فرزند به ارث ببرد.
این می تواند از بسیاری جهات مفید باشد.
ما نمونه ای از بزرگ کردن حرف اول ، استایل دادن به کلمات یا قسمت هایی از متن و … را به شما نشان خواهیم داد.
مرحله ۱ : ایجاد فایل
فایلی که می خواهیم بسازیم text_example.js است
مرحله ۲ : App.js
در این مرحله فقط یک container ساده ایجاد می کنیم.
App.js
import React, { Component } from 'react'
import TextExample from './text_example.js'
const App = () => {
return (
)
}
export default App
مرحله ۳ : Text
در این مرحله از الگوی وراثت استفاده خواهیم کرد.
styles.text برای تمام کامپوننت های Text اعمال خواهد شد.
همچنین میتوانید متوجه شوید که چگونه styling properties دیگر را برای برخی از قسمتهای Text تنظیم میکنیم.
مهم است که بدانید همه المان های فرزند دارای استایل های والدین هستند.
text_example.js
import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native'
const TextExample = () => {
return (
L
orem ipsum dolor sit amet, sed do eiusmod.
Ut enim ad minim veniam,
quis aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
)
}
export default TextExample
const styles = StyleSheet.create ({
container: {
alignItems: 'center',
marginTop: 100,
padding: 20
},
text: {
color: '#41cdf4',
},
capitalLetter: {
color: 'red',
fontSize: 20
},
wordBold: {
fontWeight: 'bold',
color: 'black'
},
italicText: {
color: '#37859b',
fontStyle: 'italic'
},
textShadow: {
textShadowColor: 'red',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius : 5
}
})
خروجی زیر را دریافت خواهید کرد :
Alert
در این بخش ، نحوه ایجاد کامپوننت سفارشی Alert را خواهیم فهمید.
مرحله ۱ : App.js
import React from 'react'
import AlertExample from './alert_example.js'
const App = () => {
return (
)
}
export default App
مرحله ۲ : alert_example.js
ما یک دکمه برای راه اندازی تابع showAlert ایجاد می کنیم.
import React from 'react'
import { Alert, Text, TouchableOpacity, StyleSheet } from 'react-native'
const AlertExample = () => {
const showAlert = () =>{
Alert.alert(
'You need to...'
)
}
return (
Alert
)
}
export default AlertExample
const styles = StyleSheet.create ({
button: {
backgroundColor: '#4ba37b',
width: 100,
borderRadius: 50,
alignItems: 'center',
marginTop: 100
}
})
خروجی :
هنگامی که روی button کلیک می کنید ، موارد زیر را مشاهده خواهید کرد :
Geolocation
در این بخش ، نحوه استفاده از Geolocation را به شما نشان خواهیم داد.
مرحله ۱ : App.js
import React from 'react'
import GeolocationExample from './geolocation_example.js'
const App = () => {
return (
)
}
export default App
مرحله ۲ : Geolocation
ما با تنظیم initial state شروع می کنیم که موقعیت اولیه و آخرین را حفظ می کند.
اکنون، باید موقعیت فعلی دستگاه را هنگامی که یک کامپوننت با استفاده از navigator.geolocation.getCurrentPosition سوار میشود، بدست آوریم.
ما پاسخ را سخت می کنیم تا بتوانیم state را به روز کنیم.
navigator.geolocation.watchPosition برای ردیابی موقعیت کاربران استفاده می شود.
در این مرحله watchers را نیز پاک می کنیم.
AsyncStorageExample.js
import React, { Component } from 'react'
import { View, Text, Switch, StyleSheet} from 'react-native'
class SwichExample extends Component {
state = {
initialPosition: 'unknown',
lastPosition: 'unknown',
}
watchID: ?number = null;
componentDidMount = () => {
navigator.geolocation.getCurrentPosition(
(position) => {
const initialPosition = JSON.stringify(position);
this.setState({ initialPosition });
},
(error) => alert(error.message),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
);
this.watchID = navigator.geolocation.watchPosition((position) => {
const lastPosition = JSON.stringify(position);
this.setState({ lastPosition });
});
}
componentWillUnmount = () => {
navigator.geolocation.clearWatch(this.watchID);
}
render() {
return (
Initial position:
{this.state.initialPosition}
Current position:
{this.state.lastPosition}
)
}
}
export default SwichExample
const styles = StyleSheet.create ({
container: {
flex: 1,
alignItems: 'center',
marginTop: 50
},
boldText: {
fontSize: 30,
color: 'red',
}
})
AsyncStorage
در این بخش به شما نشان خواهیم داد که چگونه با استفاده از AsyncStorage داده های خود را حفظ کنید.
مرحله ۱: Presentation
در این مرحله فایل App.js را ایجاد می کنیم.
import React from 'react'
import AsyncStorageExample from './async_storage_example.js'
const App = () => {
return (
)
}
export default App
مرحله ۲ : Logic
Name از initial state رشته خالی است.
وقتی کامپوننت نصب شد، آن را از persistent storage بهروزرسانی میکنیم.
setName متن را از قسمت ورودی ما می گیرد، آن را با استفاده از AsyncStorage ذخیره می کند و state را به روز می کند.
async_storage_example.js
import React, { Component } from 'react'
import { StatusBar } from 'react-native'
import { AsyncStorage, Text, View, TextInput, StyleSheet } from 'react-native'
class AsyncStorageExample extends Component {
state = {
'name': ''
}
componentDidMount = () => AsyncStorage.getItem('name').then((value) => this.setState({ 'name': value }))
setName = (value) => {
AsyncStorage.setItem('name', value);
this.setState({ 'name': value });
}
render() {
return (
{this.state.name}
)
}
}
export default AsyncStorageExample
const styles = StyleSheet.create ({
container: {
flex: 1,
alignItems: 'center',
marginTop: 50
},
textInput: {
margin: 5,
height: 100,
borderWidth: 1,
backgroundColor: '#7685ed'
}
})
وقتی برنامه را اجرا می کنیم، می توانیم متن را با تایپ کردن در قسمت ورودی به روز کنیم.
مهرسا امینی
برنامه نویس ، انیماتور ، سئوکار
زندگي در حين گرفتن چيزهايي از تو موقعيت هاي جديدي را مي بخشد