ساخت کامپوننت TextArea در React Native
TextArea یکی از معروف ترین تگ ها در HTML است که این امکان رو در اختیار کاربر میده تا در یک input چندین خط اطلاعات وارد کند.در React Native با استفاده از کامپوننت TextInput میتوان به راحتی با استفاده از multiline={true} یک TextArea ساخت.این prop باعث میشه تا قابلیت های TextInput افزایش پیدا کنه و امکان واردکردن اطلاعات در چندین خط فراهم بشه.بنابراین در این آموزش متنی ما قصد داریم یک کامپوننت TextArea سفارشی برای React Native ایجاد کنیم.
1.ایمپورت کردن کامپوننت های Platform, StyleSheet, View و TextInput در پروژه.
|
1 2 3 |
import React, { Component } from 'react'; import { Platform, StyleSheet, View, TextInput } from 'react-native'; |
2.ایجاد یک Root View در بلاک render’s return.این کامپوننت به عنوان View اصلی ما خواهد بود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
render() { return ( <View style={styles.MainContainer}> </View> ); } |
3.اضافه کردن کامپوننت TextInput درون View.
underlineColorAndroid :برای پنهان کردن خط زیر TextInput استفاده میشود.
placeholder :برای نمایش متن راهنما درون TextInput مورد استفاده قرار میگیرد.
numberOfLines : برای مشخص کردن حداکثر خط هایی که میتوان درون TextInput تایپ کرد مورد استفاده قرار میگیرد.
multiline={true} : امکان واردکردن اطلاعات در چنیدن خط را فراهم میکند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
render() { return ( <View style={styles.MainContainer}> <TextInput style={styles.TextInputStyleClass} underlineColorAndroid="transparent" placeholder={"متن دلخواه تون رو وارد کنید"} placeholderTextColor={"#9E9E9E"} numberOfLines={10} multiline={true} /> </View> ); } |
4.ایجاد استایل سفارشی
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
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 } }); |
اسکرین شات:
دیدگاهتان را بنویسید