۲۹
فروردین

جلسه ۲۳ : Picker در فریم ورک React Native

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. در قسمت قبل مبحث ActivityIndicator شاخص فعالیت در React Native و نحوه استفاده از شاخص فعالیت در راکت نیتیو رو مورد بررسی قرار دادیم. و حال در این بخش از آموزش به Picker در React Native یا نحوه استفاده از Picker در فریم ورک React Native خواهیم پرداخت. همراه ما باشید.

Picker در فریم ورک React Native

در این فصل، ما Picker ساده را با دو گزینه در دسترس ایجاد خواهیم کرد.
مرحله ۱: ایجاد فایل یا Create File
در این جا، پوشه App.js به عنوان یک کامپوننت نمایشی یا presentational استفاده می شود.

App.js

مثال :

import React from 'react'
import PickerExample from './PickerExample.js'

const App = () => {
   return (
      <PickerExample />
   )
}
export default App

import React from 'react'

import PickerExample from './PickerExample.js'

const App = () => {

return (

)

}

export default App

مرحله ۲: منطق یا Logic

this.state.user برای کنترل picker استفاده می شود.
تابع updateUser هنگامی که یک کاربر انتخاب می شود، راه می افتد.

PickerExample.js

مثال :

import React, { Component } from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native'

class PickerExample extends Component {
   state = {user: ''}
   updateUser = (user) => {
      this.setState({ user: user })
   }
   render() {
      return (
         <View>
            <Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
               <Picker.Item label = "Steve" value = "steve" />
               <Picker.Item label = "Ellen" value = "ellen" />
               <Picker.Item label = "Maria" value = "maria" />
            </Picker>
            <Text style = {styles.text}>{this.state.user}</Text>
         </View>
      )
   }
}
export default PickerExample

const styles = StyleSheet.create({
   text: {
      fontSize: 30,
      alignSelf: 'center',
      color: 'red'
   }
})

import React, { Component } from 'react';

import { View, Text, Picker, StyleSheet } from 'react-native'

class PickerExample extends Component {

state = {user: ''}

updateUser = (user) => {

this.setState({ user: user })

}

render() {

return (

<View>

<Picker.Item label = "Steve" value = "steve" />

<Picker.Item label = "Ellen" value = "ellen" />

<Picker.Item label = "Maria" value = "maria" />

</Picker>

<Text style = {styles.text}>{this.state.user}</Text>

</View>

)

}

export default PickerExample

const styles = StyleSheet.create({

text: {

fontSize: 30,

alignSelf: 'center',

color: 'red'

}

})

خروجی

Picker در فریم ورک React Native

اگر بر روی نام کلیک کنید سه گزینه به شما پیشنهاد می شود.

Picker در فریم ورک React Native

و شما می توانید یکی از آن ها را انتخاب کنید و خروجی مانند زیر خواهد بود.

Picker در React Native

کلام پایانی

در این بخش از آموزش با Picker در React Native یا نحوه استفاده از Picker در فریم ورک React Native آشنا شدیم. در ادامه Status Bar یا نوار وضعیت در راکت نیتیو رو خواهیم داشت. همراه ما باشید.

QR: جلسه ۲۳ : Picker در فریم ورک React Native

به اشتراک بگذارید

Picker در React Native ,آموزش React Native ,استفاده از Picker در فریم ورک React Native

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۳ : Picker در فریم ورک React Native

مقدمه

Picker در فریم ورک React Native

App.js

PickerExample.js

خروجی

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ