گرفتن مقدار Picker در react native

سلام دوستان.در این آموزش متنی قصد داریم یاد بگیریم که چجوری مقدار Picker در ReactNative رو بگیریم.React Native Picker که با Spinner هم در اپلیکیشن های Ios و Android شناخته میشه برای گرفتن یک مقدار از بین چندین مقدار مورد استفاده قرار میگیره.Picker بصورت پیشفرض یک مقدار را نشان میدهد و وقتی که کاربر بر روی آن کلیک میکند یک dialog box با چندین مقدار نمایش داده میشود.در این آموزش ما یک اپلیکیشن با ReactNative ایجاد میکنیم که یک Picker با چندین مقدار دارد و وقتی کاربر مقدار مورد نظر را انتخاب میکند،مقدار انتخاب شده با استفاده از Alert نمایش داده میشود.

1.ایمپورت کردن کامپوننت های StyleSheet, Alert, View, Button و Picker در پروژه.

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

import React, { Component } from 'react';

import { StyleSheet, Alert, View, Button, Picker } from 'react-native';

2.ایجاد یک متغیر به نام PickerValueHolder با state درون constructor.این متغیر مقدار آیتم انتخاب شده را دخیره میکند.

constructor(){
 
    super();
 
    this.state={
 
      PickerValueHolder : ''
 
    }
  }

constructor(){

super();

this.state={

PickerValueHolder : ''

}

3.ایجاد یک تابع به نام GetSelectedPickerItem.این تابع در رویداد onPress دکمه فراخوانی میشود.در این تابع ما مقدار آیتم انتخاب شده Picker را با استفاده از alert نمایش میدهیم.

GetSelectedPickerItem=()=>{
 
    Alert.alert(this.state.PickerValueHolder);
  }

GetSelectedPickerItem=()=>{

Alert.alert(this.state.PickerValueHolder);

}

4.اضافه کردن View در بلاک render’s return. از این View به عنوان Parent استفاده میشود و کامپوننت های Button و Picker درون این View قرار میگیرند.

render() {
   return (
     <View style={styles.MainContainer}>
 
         
      
     </View>
   );
 }

render() {

return (

</View>

);

}

5.اضافه کردن کامپوننت Picker درون View

selectedValue: مقدار آیتم انتخابی درون Picker را پس از انتخاب نمایش میدهد.

onValueChange: مقدار آیتم انتخابی را در state ذخیره میکند.

Picker.Item: برای نمایش آیتم های درون Picker مورد استفاده قرار میگیرد.

label: برای نمایش متنی که کاربر در صفحه گوشی میبیند،استفاده میشود.

value:مقداری که کاربر میخواهد انتخاب کند.

render() {
   return (
     <View style={styles.MainContainer}>
 
         
      <Picker
        selectedValue={this.state.PickerValueHolder}
 
        onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} >
 
        <Picker.Item label="React Native" value="React Native" />
        <Picker.Item label="Java" value="Java" />
        <Picker.Item label="Html" value="Html" />
        <Picker.Item label="Php" value="Php" />
        <Picker.Item label="C++" value="C++" />
        <Picker.Item label="JavaScript" value="JavaScript" />
 
      </Picker>
 
 
 
     </View>
   );
 }

render() {

return (

<Picker

selectedValue={this.state.PickerValueHolder}

onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} >

<Picker.Item label="React Native" value="React Native" />

<Picker.Item label="Java" value="Java" />

<Picker.Item label="Html" value="Html" />

<Picker.Item label="Php" value="Php" />

<Picker.Item label="C++" value="C++" />

<Picker.Item label="JavaScript" value="JavaScript" />

</Picker>

</View>

);

}

6.اضافه کردن کامپوننت Button درون View.ما در رویداد onPress دکمه تابع GetSelectedPickerItem را فراخوانی میکنیم.

render() {
   return (
     <View style={styles.MainContainer}>
 
         
      <Picker
        selectedValue={this.state.PickerValueHolder}
 
        onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} >
 
        <Picker.Item label="React Native" value="React Native" />
        <Picker.Item label="Java" value="Java" />
        <Picker.Item label="Html" value="Html" />
        <Picker.Item label="Php" value="Php" />
        <Picker.Item label="C++" value="C++" />
        <Picker.Item label="JavaScript" value="JavaScript" />
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/expo-or-not-building-react-native-apps/" 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/expo-300x150.jpg" 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">آیا Expo برای ساخت اپلیکیشن های React Native مناسب است؟</div></div></div><div class="ctaButton"></div></div></a></div> 
      </Picker>
 
 
      <Button title="Get Selected Picker Value" onPress={ this.GetSelectedPickerItem } />
 
 
     </View>
   );
 }

render() {

return (

<Picker

selectedValue={this.state.PickerValueHolder}

onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} >

<Picker.Item label="React Native" value="React Native" />

<Picker.Item label="Java" value="Java" />

<Picker.Item label="Html" value="Html" />

<Picker.Item label="Php" value="Php" />

<Picker.Item label="C++" value="C++" />

<Picker.Item label="JavaScript" value="JavaScript" />

</Picker>

</View>

);

}

7.ایجاد استایل سفارشی

const styles = StyleSheet.create({
 
 MainContainer: {
   flex: 1,
   justifyContent: 'center',
   margin: 20
   
 }
 
});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: 'center',

margin: 20

}

});

8.کد کامل برنامه در فایل App.js

import React, { Component } from 'react';
 
import { StyleSheet, Alert, View, Button, Picker } from 'react-native';
 
export default class App extends Component<{}> {
 
  constructor(){
 
    super();
 
    this.state={
 
      PickerValueHolder : ''
 
    }
  }
 
  GetSelectedPickerItem=()=>{
 
    Alert.alert(this.state.PickerValueHolder);
  }
 
 render() {
   return (
     <View style={styles.MainContainer}>
 
         
      <Picker
        selectedValue={this.state.PickerValueHolder}
 
        onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} >
 
        <Picker.Item label="React Native" value="React Native" />
        <Picker.Item label="Java" value="Java" />
        <Picker.Item label="Html" value="Html" />
        <Picker.Item label="Php" value="Php" />
        <Picker.Item label="C++" value="C++" />
        <Picker.Item label="JavaScript" value="JavaScript" />
 
      </Picker>
 
 
      <Button title="Get Selected Picker Value" onPress={ this.GetSelectedPickerItem } />
 
 
     </View>
   );
 }
}
 
const styles = StyleSheet.create({
 
 MainContainer: {
   flex: 1,
   justifyContent: 'center',
   margin: 20
   
 }
 
});

import React, { Component } from 'react';

import { StyleSheet, Alert, View, Button, Picker } from 'react-native';

export default class App extends Component<{}> {

constructor(){

super();

this.state={

PickerValueHolder : ''

}

GetSelectedPickerItem=()=>{

Alert.alert(this.state.PickerValueHolder);

}

render() {

return (

<Picker

selectedValue={this.state.PickerValueHolder}

onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} >

<Picker.Item label="React Native" value="React Native" />

<Picker.Item label="Java" value="Java" />

<Picker.Item label="Html" value="Html" />

<Picker.Item label="Php" value="Php" />

<Picker.Item label="C++" value="C++" />

<Picker.Item label="JavaScript" value="JavaScript" />

</Picker>

</View>

);

}

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: 'center',

margin: 20

}

});

اسکرین شات در نسخه Android:

اسکرین شات در نسخه Ios:

گرفتن مقدار Picker در react native

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

دیدگاهتان را بنویسید لغو پاسخ