(問渠那得清如許，為有源頭活水來。 雙手奉上RN官網(wǎng))

TextInput 基本的獲取用戶輸入內(nèi)容的組件. onChangeText屬性可以關(guān)聯(lián)一個當文本發(fā)生變化時的處理函數(shù). onSubmitEditing屬性可以關(guān)聯(lián)一個當文本提交時的處理函數(shù).

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="請輸入用于轉(zhuǎn)換的文字!"
//           關(guān)聯(lián)當文字發(fā)生變化時的處理函數(shù)
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {/*轉(zhuǎn)換文字*/}
          {this.state.text.split(' ').map((word) => word && '??').join(' ')}
        </Text>
      </View>
    );
  }
}

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