اضافه کردن icon درون TextInput در react native

سلام دوستان.دراین آموزش متنی قصد داریم یاد بگیریم که چجوری یک icon درون TextInput اضافه کنیم.TextInput با icon میتونه خیلی خوشکلتر باشه.در اکثر اپلیکیشن های جدید و پیشرفته ReactNative توسعه دهنده ها از این نوع فرم Login استفاده میکنند .پس با من همراه باشید تا قدم به قدم یک icon به TextInput اضافه کنیم.میتونید برای دانلود رایگان icon از Google Material Design Icons استفاده کنید.

1.ایجاد کردن یک پوشه به نام Images درون root پروژه و قرار دادن icon درون این پوشه.

2.اضافه کردن کامپوننت های StyleSheet, View, TextInput و Image درون بلاک import

import React, { Component } from 'react';
 
import { StyleSheet, View, TextInput, Image} from 'react-native';

import React, { Component } from 'react';

import { StyleSheet, View, TextInput, Image} from 'react-native';

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

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

render() {

return (

</View>

);

}

4.ایجاد یک View دیگه درون View اصلی.ادرون این View کامپوننت های Image + TextInput قرار میگیرد.

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

render() {

return (

</View>

);

}

5.اضافه کردن کامپوننت Image درون View با استایل SectionStyle

render() {
    return (
      <View style={styles.container}>
       
        <View style={styles.SectionStyle}>
 
        <Image source={require('./Images/ic_person.png')} style={styles.ImageStyle} />
 
          
 
        </View>
 
      </View>
    );
  }

render() {

return (

</View>

);

}

6.اضافه کردن کامپوننت TextInput بعد از کامپوننت Image

render() {
    return (
      <View style={styles.container}>
       
        <View style={styles.SectionStyle}>
 
        <Image source={require('./Images/ic_person.png')} style={styles.ImageStyle} />
 
          <TextInput
              style={{flex:1}}
              placeholder="Enter Your Email Here"
              underlineColorAndroid="transparent"
          />
 
        </View>
 
      </View>
    );
  }

render() {

return (

<TextInput

style={{flex:1}}

placeholder="Enter Your Email Here"

underlineColorAndroid="transparent"

</View>

);

}

7.ایجاد استایل سفارشی

const styles = StyleSheet.create({
 
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10
  },
  
  SectionStyle: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderWidth: .5,
    borderColor: '#000',
    height: 40,
    borderRadius: 5 ,
    margin: 10
},
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/get-android-device-imei-number-in-react-native/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://reactapp.ir/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://reactapp.ir/wp-content/uploads/آموزش-متنی-300x162.jpg" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">گرفتن شماره IMEI در گوشی های اندرویدی</div></div></div><div class="ctaButton"></div></div></a></div> 
ImageStyle: {
    padding: 10,
    margin: 5,
    height: 25,
    width: 25,
    resizeMode : 'stretch',
    alignItems: 'center'
},
 
});

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

margin: 10

SectionStyle: {

flexDirection: 'row',

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#fff',

borderWidth: .5,

borderColor: '#000',

height: 40,

borderRadius: 5 ,

margin: 10

ImageStyle: {

padding: 10,

margin: 5,

height: 25,

width: 25,

resizeMode : 'stretch',

alignItems: 'center'

});

8.کد کامل برنامه در فایل App.js

import React, { Component } from 'react';
 
import { StyleSheet, View, TextInput, Image} from 'react-native';
 
export default class App extends Component<{}> {
 
 
  render() {
    return (
      <View style={styles.container}>
       
        <View style={styles.SectionStyle}>
 
        <Image source={require('./Images/ic_person.png')} style={styles.ImageStyle} />
 
          <TextInput
              style={{flex:1}}
              placeholder="Enter Your Email Here"
              underlineColorAndroid="transparent"
          />
 
        </View>
 
      </View>
    );
  }
}
 
 
const styles = StyleSheet.create({
 
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10
  },
  
  SectionStyle: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderWidth: .5,
    borderColor: '#000',
    height: 40,
    borderRadius: 5 ,
    margin: 10
},
 
ImageStyle: {
    padding: 10,
    margin: 5,
    height: 25,
    width: 25,
    resizeMode : 'stretch',
    alignItems: 'center'
},
 
});

import React, { Component } from 'react';

import { StyleSheet, View, TextInput, Image} from 'react-native';

export default class App extends Component<{}> {

render() {

return (

<TextInput

style={{flex:1}}

placeholder="Enter Your Email Here"

underlineColorAndroid="transparent"

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

margin: 10

SectionStyle: {

flexDirection: 'row',

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#fff',

borderWidth: .5,

borderColor: '#000',

height: 40,

borderRadius: 5 ,

margin: 10

ImageStyle: {

padding: 10,

margin: 5,

height: 25,

width: 25,

resizeMode : 'stretch',

alignItems: 'center'

});

اسکرین شات در اپلیکیشن Android:

اسکرین شات در اپلیکیشن Ios:

اضافه کردن icon درون TextInput در react native

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

دیدگاهتان را بنویسید لغو پاسخ