ساخت کامپوننت 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
     
    }
 
});

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

}

});

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 : 0,

justifyContent: 'center',

margin:20

TextInputStyleClass:{

textAlign: 'center',

height: 50,

borderWidth: 2,

borderColor: '#9E9E9E',

borderRadius: 20 ,

backgroundColor : "#FFFFFF",

height: 150

}

});

اسکرین شات:

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

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

پاسخی بگذارید لغو پاسخ

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

آموزش React Navigation 5

آموزش ReactNative – ارسال sms از اپلیکیشن

رمزگذاری و رمزگشایی password در react native

پیاده سازی reCaptcha در react native

کتابخانه react-native-draggable-flatlist

آموزش React Native-ساخت منوی دایره ای (circular-action-menu)

پاسخی بگذارید لغو پاسخ