در خدمت شما هستیم با آموزش کار با TextInput در برنامه نویسی ریکت نیتیو از وب سایت آموزش برنامه نویسی سورس باران. در جلسه نهم آموزش ریکت نیتیو یاد میگیرید که چطور مقدار TextInput در ریکت نیتیو رو بگیرید و مقدار ورودی کاربر رو در قالب Alert Dialog نمایش بدید. TextInput برای بدست آوردن Value از کاربر در ReactNative استفاده میشود.
با استفاده از این مثال افرادی که تازه شروع به یادگیری ReactNative کرده اند به راحتی میتوانند کار با Stateها و Propsها رو یاد بگیرند. با ما همراه باشید…
آموزش کار با TextInput در ریکت نیتیو
کامپوننت Home ورودی ها را import کرده و رندر می کند.
import React from 'react'; import Inputs from './inputs.js' const App = () => { return ( <Inputs /> ) } export default App
ورودی ها در ریکت نیتیو
ما initial state را تعریف خواهیم کرد. پس از تعریف initial state ،ما handleEmail و توابع handlePassword را ایجاد خواهیم کرد. این توابع برای به روز رسانی وضعیت یا state استفاده می شود. تابع ()login فقط مقدار وضعیت کنونی را اعلام می کند. ما همچنین برخی از خواص دیگر را به ورودی های متن اضافه می کنیم تا نوشتن با حروف بزرگ به صورت خودکار غیرفعال شود، حاشیه پایین را در دستگاه های Android حذف کنیم و یک placeholder جایگزین کنیم.
import React, { Component } from 'react' import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native' class Inputs extends Component { state = { email: '', password: '' } handleEmail = (text) => { this.setState({ email: text }) } handlePassword = (text) => { this.setState({ password: text }) } login = (email, pass) => { alert('email: ' + email + ' password: ' + pass) } render() { return ( <View style = {styles.container}> <TextInput style = {styles.input} underlineColorAndroid = "transparent" placeholder = "Email" placeholderTextColor = "#9a73ef" autoCapitalize = "none" onChangeText = {this.handleEmail}/> <TextInput style = {styles.input} underlineColorAndroid = "transparent" placeholder = "Password" placeholderTextColor = "#9a73ef" autoCapitalize = "none" onChangeText = {this.handlePassword}/> <TouchableOpacity style = {styles.submitButton} onPress = { () => this.login(this.state.email, this.state.password) }> <Text style = {styles.submitButtonText}> Submit </Text> </TouchableOpacity> </View> ) } } export default Inputs const styles = StyleSheet.create({ container: { paddingTop: 23 }, input: { margin: 15, height: 40, borderColor: '#7a42f4', borderWidth: 1 }, submitButton: { backgroundColor: '#7a42f4', padding: 10, margin: 15, height: 40, }, submitButtonText:{ color: 'white' } })
هر بار که ما در یکی از فیلد های ورودی تایپ می کنیم، وضعیت به روز می شود. هنگامی که ما بر روی دکمه Submit کلیک می کنیم، متن از ورودی ها در داخل جعبه محاوره نمایش داده خواهد شد.
هر بار که ما در یکی از فیلدهای ورودی تایپ می کنیم، وضعیت به روز می شود. هنگامی که ما بر روی دکمه Submit کلیک می کنیم، متن از ورودی ها در داخل جعبه محاوره نمایش داده خواهد شد.
آموزش 2 کار با TextInput در برنامه نویسی ریکت نیتیو
ابتدا یک پروژه جدید ایجاد نمایید. سپس AppRegistry, StyleSheet, ScrollView, TextInput, View, Alert,Button را در بلاک import اضافه کنید.
import { AppRegistry, StyleSheet, TextInput, View, Alert, Button } from 'react-native';
ایجاد Constructor در کلاس اصلی با پارامتر props
constructor(props) { }
اضافه کردن متد super درون Constructor با پارامتر props
constructor(props) { super(props) }
.اضافه کردن this.state در Constructor و قرار دادن ‘ ‘= TextInputValueHolder بدون هیچ مقداری.برای کنترل داده هایی که در حال تغییر هستند در اپلیکیشن های ReactNative از state استفاده میکنیم.
constructor(props) { super(props) this.state = { TextInputValueHolder: '' } }
ایجاد یک تابع به نام GetValueFunction . دراین تابع ما یک متغیر از نوع const به نام TextInputValueHolder ایجاد میکنیم و مقدارش رو برابر با this.state خودش قرار میدیم.بعد از گرفتن مقدار متغیر ما این مقدار رو در قالب یک Alert Dialog نمایش میدیم.
GetValueFunction = () =>{ const { TextInputValueHolder } = this.state ; Alert.alert(TextInputValueHolder) }
اضافه کردن کامپوننت View در بلاک render return
render() { return ( <View> </View> ); }
ایجاد StyleSheet در بالای خط کد AppRegistry.registerComponent و ایجاد یک استایل اختصاصی به نام MainContainer
const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, margin: 10 } });
استفاده از استایل MainContainer در View
render() { return ( <View style={styles.MainContainer}> </View> ); }
اضافه کردن کامپوننت TextInputدرون View.متد onChangeText مقدار state رو هر بار که کاربر چیزی را تایپ میکند،بروزرسانی میکند و با استفاده از inline style ما text alignment رو مرکز در نظر گرفته ایم و ارتفاع TextInput رو 50 مشخص کرده ایم.
<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>
اضافه کردن کامپوننت Button درون View درست زیر کامپوننت TextInput و فراخوانی تابع GetValueFunction در onPress of button.
<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>
کد کامل برنامه در فایل index.js
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);
اسکرین شات
لیست جلسات قبل آموزش React Native
- React Native یا ریکت نیتیو چیست؟
- آموزش React Native – نصب و تنظیم محیط React Native
- آموزش App در React Native
- آموزش کار با State در React Native
- آموزش کار با کامپوننت Props در React Native
- آموزش استایل دهی در برنامه نویسی React Native
- آموزش flex در برنامه نویسی react native
- آموزش لیست ویو در برنامه نویسی React Native
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۳ تیر ۱۳۹۹
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس