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

0 دیدگاه

در خدمت شما هستیم با آموزش کار با 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

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 جایگزین کنیم.

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

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

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

ابتدا یک پروژه جدید ایجاد نمایید. سپس AppRegistry, StyleSheet, ScrollView, TextInput, View, Alert,Button را در بلاک import اضافه کنید.

import { AppRegistry, StyleSheet, TextInput, View, Alert, Button } from 'react-native';

1	import { AppRegistry, StyleSheet, TextInput, View, Alert, Button } from 'react-native';

ایجاد Constructor در کلاس اصلی با پارامتر props

constructor(props) {
 
   
 
  }

constructor(props) {

}

اضافه کردن متد super درون Constructor با پارامتر props

constructor(props) {
 
    super(props)
 
   
 
  }

constructor(props) {

super(props)

}

.اضافه کردن this.state در Constructor و قرار دادن ‘ ‘= TextInputValueHolder بدون هیچ مقداری.برای کنترل داده هایی که در حال تغییر هستند در اپلیکیشن های ReactNative از state استفاده میکنیم.

constructor(props) {
 
    super(props)
 
    this.state = {
 
      TextInputValueHolder: ''
 
    }
 
  }

constructor(props) {

super(props)

this.state = {

TextInputValueHolder: ''

}

ایجاد یک تابع به نام GetValueFunction . دراین تابع ما یک متغیر از نوع const به نام TextInputValueHolder ایجاد میکنیم و مقدارش رو برابر با this.state خودش قرار میدیم.بعد از گرفتن مقدار متغیر ما این مقدار رو در قالب یک Alert Dialog نمایش میدیم.

GetValueFunction = () =>{
 
 const { TextInputValueHolder }  = this.state ;
 
    Alert.alert(TextInputValueHolder)
 
  }

GetValueFunction = () =>{

const { TextInputValueHolder } = this.state ;

Alert.alert(TextInputValueHolder)

}

اضافه کردن کامپوننت View در بلاک render return

render() {
    return (
 
<View>
  
        
 
</View>
            
    );
  }

render() {

return (

<View>

</View>

);

}

ایجاد StyleSheet در بالای خط کد AppRegistry.registerComponent و ایجاد یک استایل اختصاصی به نام MainContainer

const styles = StyleSheet.create({
 
MainContainer :{
 
justifyContent: 'center',
flex:1,
margin: 10
}
 
});

const styles = StyleSheet.create({

MainContainer :{

justifyContent: 'center',

flex:1,

margin: 10

}

});

استفاده از استایل MainContainer در View

render() {
    return (
 
<View style={styles.MainContainer}>
  
        
</View>
            
    );
  }

render() {

return (

</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>

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

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

کد کامل برنامه در فایل 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);

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 (

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

);

}

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

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

پکیج صفر تا صد آموزش سئو و بهینه سازی بصورت عملی

انتشار: ۳ تیر ۱۳۹۹

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

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

ورودی ها در ریکت نیتیو

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

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط