آموزش Picker در برنامه نویسی ریکت نیتیو

آموزش Picker در برنامه نویسی ریکت نیتیو

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش Picker در برنامه نویسی ریکت نیتیو خواهیم پرداخت.
در این درس، ما با دو گزینه موجود Picker ساده را ایجاد خواهیم کرد.

مرحله ۱: ایجاد فایل

در اینجا، پوشه App.js به عنوان یک جز present نمایشی استفاده می شود.

App.js

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

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

مرحله ۲: منطق

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

خروجی

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

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

منبع.

لیست جلسات قبل آموزش ریکت نیتیو

1. آموزش برنامه نویسی ریکت نیتیو
2. آموزش تنظیمات محیطی برنامه نویسی ریکت نیتیو
3. آموزش برنامه نویسی ریکت نیتو – برنامه
4. آموزش state در برنامه نویسی ریکت نیتیو 
5. آموزش Props در برنامه نویسی ریکت نیتیو 
6. آموزش استایل دهی در برنامه نویسی ریکت نیتیو
7. آموزش Flexbox در برنامه نویسی ریکت نیتیو
8. آموزش ListView در برنامه نویسی ریکت نیتیو
9. آموزش ورودی متن در برنامه نویسی ریکت نیتیو
10. آموزش ScrollView در برنامه نویسی ریکت نیتیو
11. آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو
12.  آموزش HTTP در برنامه نویسی ریکت نیتیو
13. آموزش کار با دکمه ها در برنامه نویسی ریکت نیتیو
14. آموزش انیمیشن ها در برنامه نویسی ریکت نیتیو
15. آمورش اشکال زدایی در برنامه نویسی ریکت نیتیو
16. آموزش روتر در برنامه نویسی ریکت نیتیو
17. آموزش اجرای IOS در برنامه نویسی ریکت نیتیو
18. آموزش اجرای اندروید در برنامه نویسی ریکت نیتیو
19. آموزش View در برنامه نویسی ریکت نیتیو
20. آموزش WebView در برنامه نویسی ریکت نیتیو
21. آموزش مودال در برنامه نویسی ریکت نیتیو
22. آموزش نشانگر فعالیت در برنامه نویسی ریکت نیتیو