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

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

1. React Native یا ریکت نیتیو چیست؟
2. آموزش React Native – نصب و تنظیم محیط React Native
3. آموزش App در React Native
4. آموزش کار با State در React Native
5. آموزش کار با کامپوننت Props در React Native
6. آموزش استایل دهی در برنامه نویسی React Native
7. آموزش flex در برنامه نویسی react native
8. آموزش لیست ویو در برنامه نویسی React Native

The post آموزش کار با TextInput در برنامه نویسی ریکت نیتیو appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.