React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 2016-09-16
* TextInput 常用属性
*/
import
React, { Component } from
'react'
;
import
{
AppRegistry,
StyleSheet,
TextInput,
View
} from
'react-native'
;
class
Project
extends
Component {
render() {
return
(
<View style={styles.container}>
<TextInput style={styles.inputStyle}
//value={'我是默认的'} /*该文字无法删除*/
keyboardType = {
'number-pad'
}
//弹出键盘类型
multiline = {
true
}
//多行显示,默认false:单行显示
// password = {true} //密码 多行文本不显示密码
placeholder = {
'我是占位文字'
}
//占位文字
placeholderTextColor =
'red'
//占位文字颜色
autoCapitalize = {
'characters'
}
//通知文本输入自动利用某些字符
clearButtonMode = {
'always'
}
//右侧的清除模式
autoCorrect = {
false
}
//禁用自动校正 默认值true开启自动校正
// editable = {false} // 是否可编辑 默认为true可编辑
// retrunKeyType = {'go'} //返回键类型
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:
'#F5FCFF'
,
},
inputStyle:{
height:60,
marginTop:20,
borderWidth:1,
borderColor:
'black'
}
});
AppRegistry.registerComponent(
'Project'
, () => Project);
|