008_ReactNative: TextInput

(问渠那得清如许，为有源头活水来。 双手奉上RN官网)

TextInput 基本的获取用户输入内容的组件. onChangeText属性可以关联一个当文本发生变化时的处理函数. onSubmitEditing属性可以关联一个当文本提交时的处理函数.

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          //提示文字
          placeholder="请输入用于转换的文字!"
//           关联当文字发生变化时的处理函数
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {/*转换文字*/}
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}

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