ساخت کامپوننت TextArea در React Native

TextArea یکی از معروف ترین تگ ها در HTML است که این امکان رو در اختیار کاربر میده تا در یک input چندین خط اطلاعات وارد کند.در React Native با استفاده از کامپوننت TextInput میتوان به راحتی با استفاده از multiline={true} یک TextArea ساخت.این prop باعث میشه تا قابلیت های TextInput افزایش پیدا کنه و امکان واردکردن اطلاعات در چندین خط فراهم بشه.بنابراین در این آموزش متنی ما قصد داریم یک کامپوننت TextArea سفارشی برای React Native ایجاد کنیم.

1.ایمپورت کردن کامپوننت های Platform, StyleSheet, View و TextInput در پروژه.

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

import React, { Component } from 'react';

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

2.ایجاد یک Root View در بلاک render’s return.این کامپوننت به عنوان View اصلی ما خواهد بود.

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

render() {

return (

</View>

);

}

3.اضافه کردن کامپوننت TextInput درون View.

underlineColorAndroid :برای پنهان کردن خط زیر TextInput استفاده میشود.

placeholder :برای نمایش متن راهنما درون TextInput مورد استفاده قرار میگیرد.

numberOfLines : برای مشخص کردن حداکثر خط هایی که میتوان درون TextInput تایپ کرد مورد استفاده قرار میگیرد.

multiline={true} : امکان واردکردن اطلاعات در چنیدن خط را فراهم میکند.

render() {

    return (

        <View style={styles.MainContainer}>


         <TextInput
            style={styles.TextInputStyleClass}
            underlineColorAndroid="transparent"
            placeholder={"متن دلخواه تون رو وارد کنید"}
            placeholderTextColor={"#9E9E9E"}
            numberOfLines={10}
            multiline={true}
          />

        </View>

    );
  }

render() {

return (

<TextInput

style={styles.TextInputStyleClass}

underlineColorAndroid="transparent"

placeholder={"متن دلخواه تون رو وارد کنید"}

placeholderTextColor={"#9E9E9E"}

numberOfLines={10}

multiline={true}

</View>

);

}

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

const styles = StyleSheet.create({
    
 MainContainer :{
 
  flex:1,
  paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
  justifyContent: 'center',
  margin:20
    
  },
 
  TextInputStyleClass:{
 
    textAlign: 'center',
    height: 50,
    borderWidth: 2,
    borderColor: '#9E9E9E',
    borderRadius: 20 ,
    backgroundColor : "#FFFFFF",
    height: 150
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/student-day1400/" 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://d2ffcs5wrcif.cdn.shift8web.com/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 class="postImageUrl" style="background-image:url(https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/danesh-min-300x210.jpg);"></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">طرح تخفیف ویژه روز دانشجو</div></div></div><div class="ctaButton"></div></div></a></div>     
    }
 
});

const styles = StyleSheet.create({

MainContainer :{

flex:1,

paddingTop: (Platform.OS) === 'ios' ? 20 : ,

justifyContent: 'center',

margin:20

TextInputStyleClass:{

textAlign: 'center',

height: 50,

borderWidth: 2,

borderColor: '#9E9E9E',

borderRadius: 20 ,

backgroundColor : "#FFFFFF",

height: 150

}

});

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

import React, { Component } from 'react';

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

export default class App extends Component{

  render() {

    return (

        <View style={styles.MainContainer}>


         <TextInput
            style={styles.TextInputStyleClass}
            underlineColorAndroid="transparent"
            placeholder={"متن دلخواه تون رو وارد کنید"}
            placeholderTextColor={"#9E9E9E"}
            numberOfLines={10}
            multiline={true}
          />

        </View>

    );
  }
}

const styles = StyleSheet.create({

 MainContainer :{

  flex:1,
  paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
  justifyContent: 'center',
  margin:20

  },

  TextInputStyleClass:{

    textAlign: 'center',
    height: 50,
    borderWidth: 2,
    borderColor: '#9E9E9E',
    borderRadius: 20 ,
    backgroundColor : "#FFFFFF",
    height: 150

    }

});

import React, { Component } from 'react';

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

export default class App extends Component{

render() {

return (

<TextInput

style={styles.TextInputStyleClass}

underlineColorAndroid="transparent"

placeholder={"متن دلخواه تون رو وارد کنید"}

placeholderTextColor={"#9E9E9E"}

numberOfLines={10}

multiline={true}

</View>

);

}

const styles = StyleSheet.create({

MainContainer :{

flex:1,

paddingTop: (Platform.OS) === 'ios' ? 20 : ,

justifyContent: 'center',

margin:20

TextInputStyleClass:{

textAlign: 'center',

height: 50,

borderWidth: 2,

borderColor: '#9E9E9E',

borderRadius: 20 ,

backgroundColor : "#FFFFFF",

height: 150

}

});

اسکرین شات:

ساخت کامپوننت TextArea در React Native

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

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

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

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

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

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

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

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