نحوه ارتباط با اپلیکیشن از طریق دریافت ورودی در react

نحوه ارتباط با اپلیکیشن از طریق دریافت ورودی

استفاده از کادر ورود متن

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: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

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 (

<TextInput

style={{height: ۴۰}}

placeholder="Type here to translate!"

onChangeText={(text) => this.setState({text})}

{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}

</Text>

</View>

);

}

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);

.نتیجه کد های بالا به صورت زیر خواهد بود

بیشتر بخوانید روش های چیدن محتوا در صفحه با react native

توی این مثال ما 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