ReactNative开发——TextInput
TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件提供了多种特性的配置,比如自动完成,自动大小写,占位文字,以及多种不同的键盘类型(如数字键盘)等等。
TextInput的属性
export default class Project07 extends Component {
render() {
return (
<View style={{flex:1,justifyContent:'flex-start'}}>
<TextInput
style={styles.textInputStyle}
onChangeText={(text) => console.log(text)}
// value={this.state.text}
placeholder={'i am placeholder'} //占位字符串
autoCapitalize={'words'} //每个单词首字母自动改为大写,不过我在andorid机上并没有看到效果
placeholderTextColor={'red'} //占位字符串的颜色
keyboardType={'numeric'} //键盘类型,纯数字键盘
/>
<TextInput style={{height:80,margin:10}}
defaultValue={' I am default value'} //默认字符串
autoCorrect={true} //自动更正用户的输入单词
editable={true} //设置是否可以编辑
maxLength={10} //最多允许用户输入多少字符
multiline={true} //多行
secureTextEntry={false} //是否密码
//用户选择在输入框选择的字符串发生改变时,这个回调函数会会回调,传回的参数格式是:{ nativeEvent: { selection: { start,end } }
onSelectionChange={({nativeEvent})=>
{console.log(nativeEvent.selection.start+','+nativeEvent.selection.end)}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
textInputStyle: {
height: 80,borderColor: 'grey',//边框颜色
borderWidth: 1,//边框线宽
margin: 10,},
属性 | 值 |
---|---|
placehoder | 用来设置占位字符串 |
placehoderTextColor | 用来设置占位字符串的颜色 |
autoCapitalize | 字符串类型,它的取值可以是:none,sentences,words,characters,分别代表不自动改变大小写,将每句话的首字母自动改为大写,将每个单词的首字母自动改为大写,将每个英文字母自动改为大写 |
keyboardType | 决定弹出键盘的类型,可以取值 default,numeric,emai-address 等等。 |
caretHidden | 是否隐藏光标 |
defaultValue | 默认值 |
autoCorrect | 自动检查单词拼写错误 |
maxLength | 支持的最大长度 |
secureTextEntry | 输入类型是否为密码,如果设置为true,输入的内容将用 * 代替 |
onChangeText | 文字改变后回调 |
onSelectionChange | 长按选择文本时,选择范围变化时调用此函数,传回参数的格式形如 { nativeEvent: { selection: { start,end } } } |
等等。。。
更多属性请参考官网文档。
http://reactnative.cn/docs/0.44/textinput.html#content