بخش های اصلی

آموزش React Native

React Native – ورودی متنی (Text Input)

در این بخش نحوه ی کار با عنصر TextInput در React Native را آموزش میدیم.

باز هم از قاعده ی جداسازی استفاده می کنیم؛ کامپوننتِ Container برای منطق استفاده میشه و کامپوننت نمایشی برای هَندِل کدن لایه ی view (نمایش) استفاه میشه.

منطق

state (وضعیت) اولیه را در سازنده تعریف می کنیم.

سپس توابعِ updateEmail و updatePassword را ایجاد میکنیم. این دو تابع برای به روز رسانیِ state (وضعیت) استفاده میشن.

تابعِ login فقط مقدار جاریِ state (وضعیت) را نشان میده.

سه تابع بالا را به MyPresentationalComponent پاس میدیم، بنابراین می توانیم از MyPresentationalComponent بعنوان Prop استفاده کنیم.

src/components/myComponent/MyPresentationalComponent.js

مثال

import React, { Component } from 'react'
import { View } from 'react-native'
import MyPresentationalComponent from './MyPresentationalComponent'

export default class MyContainerComponent extends Component {
   constructor() {
      super()
      this.state = {
         email: '',
         password: ''
      }
   }
   updateEmail = (text) => {
      this.setState({email: text})
   }
   updatePassword = (text) => {
      this.setState({password: text})
   }
   login = () => {
      alert('email: ' + this.state.email + ' password: ' + this.state.password)
   }

   render(){
      return(
         <View>
            <MyPresentationalComponent
               updateEmail = {this.updateEmail}
               updatePassword = {this.updatePassword}
               login = {this.login}
            />
         </View>
      )
   }
}

View (نمایش)

می توانیم به توابعی که در مثال بالا ایجاد کردیم بعنوانِ props.updateEmail، props.updatePassword و props.login دسترسی داشته باشیم.

تعدادی پراپرتی دیگه هم به text inputها (ورودی های متن) اضافه می کنیم، چون می خوایم قابلیتِ "تبدیل حروف به حروف بزرگ بصورت خودکار" را غیر فعال کنیم و یک placeholder تعریف کنیم.

همچنین استایل دادن در این کامپوننت را هم هَندِل می کنیم.

src/components/myComponent/MyPresentationalComponent.js

مثال

import React, { Component } from 'react'

import {
   View,
   Text,
   TouchableHighlight,
   TextInput,
   StyleSheet
} from 'react-native'

export default MyPresentationalComponent = (props) => {
   return (
      <View style = {styles.container}>
         <TextInput
            style = {styles.input}
            placeholder = 'Email'
            autoCapitalize = 'none'
            onChangeText = {props.updateEmail}
         />
         <TextInput
            style = {styles.input}
            placeholder = 'Password'
            autoCapitalize = 'none'
            onChangeText = {props.updatePassword}
         />
         <TouchableHighlight
            style = {styles.submit}
            onPress = { () => props.login(props.email, props.password)}>
            <Text>
               Submit
            </Text>
         </TouchableHighlight>
      </View>
   )
}

const styles = StyleSheet.create ({
   container: {
      flex: 1,
      alignItems: 'center',
      justifyContent:'center',
      paddingTop: 23
   },
   input: {
      margin: 15,
      height: 40,
      borderColor: 'grey',
      borderWidth: 1
   },
   submit: {
      backgroundColor: 'silver',
      padding: 10
   }
})

اگه روی دکمه ی Submit کلیک کنین، متن داخل ورودی ها، داخل پنجره ی alert نمایش داده میشه.

خروجی

react native text input

مبحث آموزشی

آموزش React Native

Learn React Native

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

آخرین مقالات

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد