TextInput 是一個允許用戶輸入文本的基礎(chǔ)組件贪绘。
- 它有一個名為 onChangeText 的屬性役耕，此屬性接受一個函數(shù)青瀑，而此函數(shù)會在文本變化時被調(diào)用衣撬。
- 另外還有一個名為 onSubmitEditing的屬性酿联，會在文本被提交后（用戶按下軟鍵盤上的提交鍵）調(diào)用终息。
假如我們要實現(xiàn)當(dāng)用戶輸入時夺巩，實時將其以單詞為單位翻譯為另一種文字。我們假設(shè)這另一種文字來自某個吃貨星球周崭，只有一個單詞： ??柳譬。所以"Hello there Bob"將會被翻譯為"??????"。
代碼如下：
import React, { Component } from 'react';
import {
AppRegistry,
Text,
TextInput,
View } from 'react-native';
class MyApp 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>
);
}
}
// 注冊應(yīng)用(registerComponent)后才能正確渲染
// 注意：只把應(yīng)用作為一個整體注冊一次休傍，而不是每個組件/模塊都注冊
AppRegistry.registerComponent('MyApp', () => MyApp);
在上面的例子里征绎，我們把 text 保存到state中，因為它會隨著時間變化磨取。
文本輸入方面還有很多其他的東西要處理人柿。比如你可能想要在用戶輸入的時候進(jìn)行驗證，在 React的表單組件中的受限組件 一節(jié)中有一些詳細(xì)的示例（注意react中的onChange對應(yīng)的是rn中的onChangeText）忙厌。此外你還需要看看TextInput的文檔凫岖。
