آموزش ورودی متن در برنامه نویسی ریکت نیتیو

4 سال پیش

امتیاز دهید post

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش ورودی متن در برنامه نویسی ریکت نیتیو خواهیم پرداخت.

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

مولفه Home ورودی ها را وارد و ارائه می کند.

App.js

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

const App = () =&gt; {
   return (
      &lt;Inputs /&gt;
   )
}
export default App

import React from 'react';

import Inputs from './inputs.js'

const App = () => {

return (

)

}

export default App

ورودی ها

ما state اولیه را تعریف خواهیم کرد.

پس از تعریف state اولیه، توابع handleEmail و handlePassword را ایجاد خواهیم کرد. این توابع برای به روزرسانی state استفاده می شوند.

عملکرد ورود به سیستم فقط مقدار فعلی state را هشدار می دهد.

ما همچنین برخی ویژگی های دیگر را به ورودی متن اضافه می کنیم تا بزرگ کردن خودکار را غیرفعال کنیم، حاشیه پایین دستگاه های اندروید را برداریم و یک مکان نگهدار تنظیم کنیم.

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) =&gt; {
      this.setState({ email: text })
   }
   handlePassword = (text) =&gt; {
      this.setState({ password: text })
   }
   login = (email, pass) =&gt; {
      alert('email: ' + email + ' password: ' + pass)
   }
   render() {
      return (
         &lt;View style = {styles.container}&gt;
            &lt;TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Email"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handleEmail}/&gt;
            
            &lt;TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Password"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handlePassword}/&gt;
            
            &lt;TouchableOpacity
               style = {styles.submitButton}
               onPress = {
                  () =&gt; this.login(this.state.email, this.state.password)
               }&gt;
               &lt;Text style = {styles.submitButtonText}&gt; Submit &lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
         &lt;/View&gt;
      )
   }
}
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 کلیک می کنیم، متن ورودی ها در داخل کادر گفتگو نشان داده می شود.

آموزش ورودی متن در برنامه نویسی ریکت نیتیو

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

آموزش ورودی متن در برنامه نویسی ریکت نیتیو

منبع.

لیست جلسات قبل آموزش ریکت نیتیو

امتیاز دهید post

برچسب ها : آموزش برنامه نویسی موبایل آموزش ریکت نیتیو

نویسنده مطلب saber

آموزش ورودی متن در برنامه نویسی ریکت نیتیو

App.js

ورودی ها

inputs.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

بدون دیدگاه

App.js

ورودی ها

inputs.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه