۲۹
فروردین

جلسه ۰۹ : کار با TextInput در React Native

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

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

فهرست

مقدمه

سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. در جلسه قبل مبحث رو به آشنایی با ListView در React Native رسوندیم. در این قسمت نشون خواهیم داد که کار با TextInput در React Native چگونه خواهد بود.

کار با TextInput در React Native

در این فصل، ما به شما نشان خواهیم داد که چگونه با عناصر TextInput در React Native کار کنید.
کامپوننت Home ورودی ها را import کرده و رندر می کند.

App.js

مثال :

import React from 'react';
import Inputs from './inputs.js'

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

import React from 'react';

import Inputs from './inputs.js'

const App = () => {

return (

)

}

export default App

ورودی ها

ما initial state را تعریف خواهیم کرد.
پس از تعریف initial state ،ما handleEmail و توابع handlePassword را ایجاد خواهیم کرد. این توابع برای به روز رسانی وضعیت یا state استفاده می شود.
تابع ()login فقط مقدار وضعیت کنونی را اعلام می کند.
ما همچنین برخی از خواص دیگر را به ورودی های متن اضافه می کنیم تا نوشتن با حروف بزرگ به صورت خودکار غیرفعال شود، حاشیه پایین را در دستگاه های Android حذف کنیم و یک placeholder جایگزین کنیم.

inputs.js

مثال :

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

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

}

alert('email: ' + email + ' password: ' + pass)

}

render() {

return (

<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 کلیک می کنیم، متن از ورودی ها در داخل جعبه محاوره نمایش داده خواهد شد.

کار با TextInput در React Native

هر بار که ما در یکی از فیلدهای ورودی تایپ می کنیم، وضعیت به روز می شود. هنگامی که ما بر روی دکمه Submit کلیک می کنیم، متن از ورودی ها در داخل جعبه محاوره نمایش داده خواهد شد.

کار با TextInput در React Native

کلام پایانی

چگونگی کار با TextInput در React Native رو همراه مثال بیان نمودیم در ادامه آشنایی با ScrollView رو خواهیم داشت. موفق باشید.

QR: جلسه ۰۹ : کار با TextInput در React Native

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

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

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

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

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

جلسه ۰۹ : کار با TextInput در React Native

مقدمه

کار با TextInput در React Native

App.js

ورودی ها

inputs.js

کلام پایانی

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ