一个简单的例子:
<View style={styles.inputContainer}>
<TextInput
ref="input"
placeholder={locked ? '表格已被锁定,你不能编辑' : '只能阅读'}
style={styles.input}
editable={false}
placeholderTextColor="#c6c7c9"
underlineColorAndroid="transparent"
/>
</View>
基本属性
1. keyboardType
keyboardType用于设置弹出软键盘的类型。它的取值为范围为: enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') ,其中default、numeric、email-address和phone-pad是跨平台。
2.multiline
如果值为真,文本输入可以输入多行,默认值为假。
3.password
如果值为真,文本输入框就成为一个密码区域,默认值为假。
4.placeholder
在文本输入之前提示用户文本框功能,也就是占位文字。
5.placeholderTextColor
占位字符串的文本颜色。
6. autoCapitalize
控制TextInput是否要自动将特定字符切换为大写。
- none:不自动使用任何东西
- sentences:每个句子的首字母(默认)
- words:每一个单词的首字母
- characters:所有字符
7.autoCorrect
如果为false,会关闭拼写自动修正。默认值是true。
8.autoFocus
如果为true,在componentDidMount后会获得焦点。默认值为false。
9.editable
如果值为false,文本是不可编辑,默认值为true。
10. returnKeyType
决定键盘右下角返回键的作用。
- default
- go
- join
- next
- route
- search
- send
- yahoo
- done
- emergency-call
11. onChange
当文本框内容变化时调用此回调函数,监听输入的值。
12. onChangeText
当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。
13. onFocus
当文本框获得焦点的时候调用此回调函数。
14. onBlur
当文本框失去焦点的时候调用此回调函数。
_onBlur = ({ nativeEvent: { text } }) => {
console.log(text)
}
15. onEndEditing
安卓中需加
underlineColorAndroid="transparent"
来清除下划线