نحوه ارتباط با اپلیکیشن از طریق دریافت ورودی در react native
نحوه ارتباط با اپلیکیشن از طریق دریافت ورودی
استفاده از کادر ورود متن
textInput یک تگ پایه هست که به کاربراجازه میده که متنی رو وارد کنه. و prop یا پایه ی onChangeText رو داره که که یک تابع رو در هر بار که متن تغییر پیدا میکنه فراخوانی میکنه و همچنین یک پایه ی onSubmitEditing داره که یک تابع رو در هر زمان که متن فرستاده بشه فراخوانی میکنه.
به عنوان مثال، بیاین بگیم که همونطورکه کاربر داره تایپ میکنه، شما دارین کلماتشو به یه زبان دیگه ترجمه میکنین. به ازای هر کلمه علامت 🍕نوشته میشه. پس جمله سلام باب اینجوری ترجمه میشه: ” 🍕 🍕 “
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ | import React, { Component } from 'react'; import { AppRegistry, Text, TextInput, View } from 'react-native'; export default class PizzaTranslator extends Component { constructor(props) { super(props); this.state = {text: ''}; } render() { return ( <View style={{padding: ۱۰}}> <TextInput style={{height: ۴۰}} placeholder="Type here to translate!" onChangeText={(text) => this.setState({text})} /> <Text style={{padding: ۱۰, fontSize: ۴۲}}> {this.state.text.split(' ').map((word) => word && '🍕').join(' ')} </Text> </View> ); } } // skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator); |
.نتیجه کد های بالا به صورت زیر خواهد بود
توی این مثال ما text رو ذخیره میکنیم چون طی زمان تغییر میکنه.
چیزای زیادی هست که شما میتونین با کادر ورود متن انجام بدین. به عنوان مثال، شما میتونین متن وارد شده رو اعتبارسنجی یا راستی آزمایی کنین. برای جزئیات بیشتر لینک های زیر رو یه نگاهی بندازین.
https://reactjs.org/docs/forms.html#controlled-components
https://facebook.github.io/react-native/docs/textinput
وروی متن یکی از راه های ارتباط بقرار کردن کاربر با اپلیکیشن هست. شما میتونین یک نوع دیگه ورودی رو توی لینک زیر ببینین:
https://facebook.github.io/react-native/docs/handling-touches
لینک مقاله:
https://facebook.github.io/react-native/docs/handling-text-input
پاسخی بگذارید