看到React Native 中的文本輸入 诡壁，相信有人會(huì)有種感覺(jué)Text Input鳞陨。對(duì)的颠猴，在React Native可以通過(guò)TextInput進(jìn)行用戶界面的文本輸入娜饵。
TextInput是一個(gè)允許用戶輸入文本的基礎(chǔ)組件坡贺。其中有一個(gè)屬性onChangeText，可以接受一個(gè)函數(shù)箱舞，此函數(shù)會(huì)在文本變化時(shí)被調(diào)用拴念。
其中一個(gè)屬性onSubmitEditing，會(huì)在文本被提交后（用戶按下軟鍵盤上的提交鍵）調(diào)用褐缠。
假如我們要實(shí)現(xiàn)當(dāng)用戶輸入時(shí)政鼠，實(shí)時(shí)將其以單詞為單位翻譯為另一種文字。我們假設(shè)這另一種文字來(lái)自某個(gè)吃貨星球队魏，只有一個(gè)單詞： ??公般。所以"Hello there Bob"將會(huì)被翻譯為"??????"。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
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>
);
}
}
AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);
在上面的例子里胡桨，我們把text保存到state中官帘，因?yàn)樗鼤?huì)隨著時(shí)間變化。即通過(guò)onChangeText={(text) => this.setState({text})}來(lái)進(jìn)行實(shí)現(xiàn)的昧谊。
其中text.split(' ')根據(jù)空格進(jìn)行分割刽虹；map((word) => word && '??')合成一個(gè)數(shù)組，然后把每個(gè)數(shù)組元素轉(zhuǎn)換為??呢诬；
join(' ')并在每個(gè)數(shù)組元素后面加空格涌哲。
