TextInput در react native
سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری مقدار TextInput در ReactNative رو بگیریم و مقدار ورودی کاربر رو در قالب Alert Dialog نمایش بدیم.TextInput برای بدست آوردن Value از کاربر در ReactNative استفاده میشود.همین کار در اندروید با استفاده از EditText انجام میشود.با استفاده از این مثال افرادی که تازه شروع به یادگیری ReactNative کرده اند به راحتی میتوانند کار با Stateها و Propsها رو یاد بگیرند. در ویدئو زیر هم در این مورد توضیحاتی داده شده.
1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید.
2.اضافه کردن AppRegistry, StyleSheet, ScrollView, TextInput, View, Alert,Button در بلاک import
|
1 |
import { AppRegistry, StyleSheet, TextInput, View, Alert, Button } from 'react-native'; |
3.ایجاد Constructor در کلاس اصلی با پارامتر props
|
1 2 3 4 5 |
constructor(props) { } |
4.اضافه کردن متد super درون Constructor با پارامتر props
|
1 2 3 4 5 6 7 |
constructor(props) { super(props) } |
5.اضافه کردن this.state در Constructor و قرار دادن ‘ ‘= TextInputValueHolder بدون هیچ مقداری.برای کنترل داده هایی که در حال تغییر هستند در اپلیکیشن های ReactNative از state استفاده میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 |
constructor(props) { super(props) this.state = { TextInputValueHolder: '' } } |
6.ایجاد یک تابع به نام GetValueFunction . دراین تابع ما یک متغیر از نوع const به نام TextInputValueHolder ایجاد میکنیم و مقدارش رو برابر با this.state خودش قرار میدیم.بعد از گرفتن مقدار متغیر ما این مقدار رو در قالب یک Alert Dialog نمایش میدیم.
|
1 2 3 4 5 6 7 |
GetValueFunction = () =>{ const { TextInputValueHolder } = this.state ; Alert.alert(TextInputValueHolder) } |
7.اضافه کردن کامپوننت View در بلاک render return
|
1 2 3 4 5 6 7 8 9 10 11 |
render() { return ( <View> </View> ); } |
8.ایجاد StyleSheet در بالای خط کد AppRegistry.registerComponent و ایجاد یک استایل اختصاصی به نام MainContainer
|
1 2 3 4 5 6 7 8 9 10 |
const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, margin: 10 } }); |
9.استفاده از استایل MainContainer در View
|
1 2 3 4 5 6 7 8 9 10 |
render() { return ( <View style={styles.MainContainer}> </View> ); } |
10.اضافه کردن کامپوننت TextInputدرون View.متد onChangeText مقدار state رو هر بار که کاربر چیزی را تایپ میکند،بروزرسانی میکند و با استفاده از inline style ما text alignment رو مرکز در نظر گرفته ایم و ارتفاع TextInput رو 50 مشخص کرده ایم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<View style={styles.MainContainer}> <TextInput // Adding hint in Text Input using Place holder. placeholder="Enter Text here" onChangeText={TextInputValueHolder => this.setState({TextInputValueHolder})} style={{textAlign: 'center', marginBottom: 7, height: 50}} /> </View> |
11.اضافه کردن کامپوننت Button درون View درست زیر کامپوننت TextInput و فراخوانی تابع GetValueFunction در onPress of button.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<View style={styles.MainContainer}> <TextInput // Adding hint in Text Input using Place holder. placeholder="Enter Text here" onChangeText={TextInputValueHolder => this.setState({TextInputValueHolder})} style={{textAlign: 'center', marginBottom: 7, height: 50}} /> <Button title="Get Text Input Entered Value" onPress={this.GetValueFunction} color="#2196F3" /> </View> |
12.کد کامل برنامه در فایل index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, TextInput, View, Alert, Button } from 'react-native'; class Myproject extends Component { constructor(props) { super(props) this.state = { TextInputValueHolder: '' } } GetValueFunction = () =>{ const { TextInputValueHolder } = this.state ; Alert.alert(TextInputValueHolder) } render() { return ( <View style={styles.MainContainer}> <TextInput // Adding hint in Text Input using Place holder. placeholder="Enter Text here" onChangeText={TextInputValueHolder => this.setState({TextInputValueHolder})} style={{textAlign: 'center', marginBottom: 7, height: 50}} /> <Button title="Get Text Input Entered Value" onPress={this.GetValueFunction} color="#2196F3" /> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, margin: 10 } }); AppRegistry.registerComponent('Myproject', () => Myproject); |
اسکرین شات:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
آموزش React Navigation 5
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام خسته نباشید میگم بابت زحماتتون .کد بالا ایراد داره در خط ۵ باید export default class Myproject extends Component تغییر کنه تا اجرا بشه .
سلام مهیار عزیز.
کد ایراد نداره.چون از AppRegistry.registerComponent در همین فایل استفاده شده نیاز به export نداره.البته این متن بر اساس نسخه های قدیمی react native نوشته شده ولی در نسخه های جدید شما باید export default رو قبل از کلاس بزارید