文本輸入
通過鍵盤將文本輸入到應用程序的一個基本的組件。屬性提供幾個功能的可配置性，比如自動校正，自動還原，占位符文本，和不同的鍵盤類型，如數(shù)字鍵盤。 最簡單的一個用例是放置一個 TextInput，利用 onChangeText 事件來讀取用戶的輸入。還有其他的事件可以使用，比如onSubmitEditing 和 onFocus。一個簡單的例子：
<View>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}} onChangeText={(text) => this.setState({input: text})}
/> <Text>{'user input: ' + this.state.input}</Text></View>value 屬性可以用于設(shè)置輸入的值，其目的是讓組件的狀態(tài)更清晰，但是<TextInput> 所有的選項都是異步的，所以默認情況下它并不表現(xiàn)的像一個真正的控制組件。就像設(shè)置默認值一樣設(shè)置 value 一次，但是你同樣可以根據(jù)onChangeText 不斷的改變它的值。如果你真的想要迫使組件一直都可以恢復到你設(shè)置的值，那么你可以設(shè)置成controlled={true}。
不是所有版本都支持 multiline 屬性，然后有些屬性只支持多行輸入。
屬性
autoCapitalize enum('none', 'sentences', 'words', 'characters')
可以通知文本輸入自動利用某些字符。
characters：所有字符，
words：每一個單詞的首字母
sentences：每個句子的首字母（默認情況下）
none：不會自動使用任何東西
autoCorrect 布爾型
如果值為假，禁用自動校正。默認值為真。
autoFocus 布爾型
如果值為真，聚焦 componentDidMount 上的文本。默認值為假。
bufferDelay 數(shù)值型
這個會幫助避免由于 JS 和原生文本輸入之間的競態(tài)條件而丟失字符。默認值應該是沒問題的，但是如果你每一個按鍵都操作的非常緩慢，那么你可能想嘗試增加這個。
clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always')
清除按鈕出現(xiàn)在文本視圖右側(cè)的時機
controlled 布爾型
如果你真想要它表現(xiàn)成一個控制組件，你可以將它的值設(shè)置為真，但是按下按鍵，并且/或者緩慢打字，你可能會看到它閃爍，這取決于你如何處理 onChange 事件。
editable 布爾型
如果值為假，文本是不可編輯的。默認值為真。
enablesReturnKeyAutomatically 布爾型
如果值為真，當沒有文本的時候鍵盤是不能返回鍵值的，當有文本的時候會自動返回。默認值為假。
keyboardType enum('default', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'email-address', 'decimal-pad', 'twitter', 'web-search', "numeric")
決定打開哪種鍵盤，例如，數(shù)字鍵盤。
multiline 布爾型
如果值為真，文本輸入可以輸入多行。默認值為假。
onBlur 函數(shù)
當文本輸入是模糊的，調(diào)用回調(diào)函數(shù)
onChange 函數(shù)
當文本輸入的文本發(fā)生變化時，調(diào)用回調(diào)函數(shù)
onChangeText 函數(shù)
onEndEditing 函數(shù)
onFocus 函數(shù)
當輸入的文本是聚焦狀態(tài)時，調(diào)用回調(diào)函數(shù)
onSubmitEditing 函數(shù)
password 布爾型
如果值為真，文本輸入框就成為一個密碼區(qū)域。默認值為假。
placeholder 字符串型
在文本輸入之前字符串將被呈現(xiàn)出來
placeholderTextColor 字符串型
占位符字符串的文本顏色
returnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call')
決定返回鍵的樣式
secureTextEntry 布爾型
如果值為真，文本輸入框就會使輸入的文本變得模糊，以便于像密碼這樣敏感的文本保持安全。默認值為假。
selectionState 文檔選擇狀態(tài)
見 DocumentSelectionState.js，一些狀態(tài)是為了維護一個文檔的選擇信息。
style Text#style
testID 字符串型
用于端對端測試時定位視圖。
value 字符串型
文本輸入的默認值
例子
'use strict';var React = require('react-native');var {
Text,
TextInput,
View,
StyleSheet,
} = React;var WithLabel = React.createClass({
render: function() { return (
<View style={styles.labelContainer}>
<View style={styles.label}>
<Text>{this.props.label}</Text>
</View>
{this.props.children}
</View>
);
}
});var TextEventsExample = React.createClass({
getInitialState: function() { return {
curText: '<No Event>',
prevText: '<No Event>',
};
},
updateText: function(text) {
this.setState({
curText: text,
prevText: this.state.curText,
});
},
render: function() { return (
<View>
<TextInput
autoCapitalize="none"
placeholder="Enter text to see events"
autoCorrect={false}
onFocus={() => this.updateText('onFocus')}
onBlur={() => this.updateText('onBlur')}
onChange={(event) => this.updateText( 'onChange text: ' + event.nativeEvent.text
)}
onEndEditing={(event) => this.updateText( 'onEndEditing text: ' + event.nativeEvent.text
)}
onSubmitEditing={(event) => this.updateText( 'onSubmitEditing text: ' + event.nativeEvent.text
)}
style={styles.default}
/>
<Text style={styles.eventLabel}>
{this.state.curText}{'\n'}
(prev: {this.state.prevText})
</Text>
</View>
);
}
});var styles = StyleSheet.create({
page: {
paddingBottom: 300,
}, default: {
height: 26,
borderWidth: 0.5,
borderColor: '#0f0f0f',
padding: 4,
flex: 1,
fontSize: 13,
},
multiline: {
borderWidth: 0.5,
borderColor: '#0f0f0f',
flex: 1,
fontSize: 13,
height: 50,
},
eventLabel: {
margin: 3,
fontSize: 12,
},
labelContainer: {
flexDirection: 'row',
marginVertical: 2,
flex: 1,
},
label: {
width: 80,
justifyContent: 'flex-end',
flexDirection: 'row',
marginRight: 10,
paddingTop: 2,
},
});
exports.title = '<TextInput>';
exports.description = 'Single-line text inputs.';
exports.examples = [
{
title: 'Auto-focus',
render: function() { return <TextInput autoFocus={true} style={styles.default} />;
}
},
{
title: 'Auto-capitalize',
render: function() { return (
<View>
<WithLabel label="none">
<TextInput
autoCapitalize="none"
style={styles.default}
/>
</WithLabel>
<WithLabel label="sentences">
<TextInput
autoCapitalize="sentences"
style={styles.default}
/>
</WithLabel>
<WithLabel label="words">
<TextInput
autoCapitalize="words"
style={styles.default}
/>
</WithLabel>
<WithLabel label="characters">
<TextInput
autoCapitalize="characters"
style={styles.default}
/>
</WithLabel>
</View>
);
}
},
{
title: 'Auto-correct',
render: function() { return (
<View>
<WithLabel label="true">
<TextInput autoCorrect={true} style={styles.default} />
</WithLabel>
<WithLabel label="false">
<TextInput autoCorrect={false} style={styles.default} />
</WithLabel>
</View>
);
}
},
{
title: 'Keyboard types',
render: function() { var keyboardTypes = [ 'default', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'email-address', 'decimal-pad', 'twitter', 'web-search', 'numeric',
]; var examples = keyboardTypes.map((type) => { return (
<WithLabel key={type} label={type}>
<TextInput
keyboardType={type}
style={styles.default}
/>
</WithLabel>
);
}); return <View>{examples}</View>;
}
},
{
title: 'Return key types',
render: function() { var returnKeyTypes = [ 'default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call',
]; var examples = returnKeyTypes.map((type) => { return (
<WithLabel key={type} label={type}>
<TextInput
returnKeyType={type}
style={styles.default}
/>
</WithLabel>
);
}); return <View>{examples}</View>;
}
},
{
title: 'Enable return key automatically',
render: function() { return (
<View>
<WithLabel label="true">
<TextInput enablesReturnKeyAutomatically={true} style={styles.default} />
</WithLabel>
</View>
);
}
},
{
title: 'Secure text entry',
render: function() { return (
<View>
<WithLabel label="true">
<TextInput secureTextEntry={true} style={styles.default} value="abc" />
</WithLabel>
</View>
);
}
},
{
title: 'Event handling',
render: function(): ReactElement { return <TextEventsExample /> },
},
{
title: 'Colored input text',
render: function() { return (
<View>
<TextInput
style={[styles.default, {color: 'blue'}]}
value="Blue"
/>
<TextInput
style={[styles.default, {color: 'green'}]}
value="Green"
/>
</View>
);
}
},
{
title: 'Clear button mode',
render: function () { return (
<View>
<WithLabel label="never">
<TextInput
style={styles.default}
clearButtonMode="never"
/>
</WithLabel>
<WithLabel label="while editing">
<TextInput
style={styles.default}
clearButtonMode="while-editing"
/>
</WithLabel>
<WithLabel label="unless editing">
<TextInput
style={styles.default}
clearButtonMode="unless-editing"
/>
</WithLabel>
<WithLabel label="always">
<TextInput
style={styles.default}
clearButtonMode="always"
/>
</WithLabel>
</View>
);
}
},
];
更多建議：