1.Text
- number of lines （显示几行）
2.TextInput
-
1.autoCapitalize
- characters: 所有的字符。
- words: 每个单词的第一个字符。
- sentences: 每句话的第一个字符（默认）。
- none: 不自动切换任何字符为大写。
- autoCorrect 自动修正
- maxLength 限定输入范围
- multiline 为true 输入多行
- placeholder 设置文本框默认值
- secureTextEntry 文字输入显示小圆点
- selectionColor 设置光标颜色
- editable true 为可编辑, false为不可编辑
- value
- defaultValue
3.keyboard
-
keyboardType 决定弹出何种软键盘的类型（下面这些值在所有平台都可用：）
- default
- numeric
- email-address
- phone-pad
-
returnkeyType( 设置返回键类型, 以下这些跨平台使用)
- done
- go
- next
- search
- send
Image ( 本地装载图片 )
<Image source={require('./images/home_selected.png')} style={styles.image} />
- Image ( 用混合App的图片资源 )
未成功
-
TouchableHighLight ( 设置高亮 )
- underlayColor 背景色
- activeOpacity 透明度
TouchableNativeFeedback ( 点击显示一个不透明的圆型区域 )
TouchableOpacity ( 点击使元素降低透明度 ),可以activeOpacity控制透明色.
ListView （程序创建数据）
export default class AwesomeProject extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
this.state = {
dataSource: ds.cloneWithRows(this.genRows()),
};
}
genRows() {
var dataBlob = []
for(var i = 0 ; i < 20 ; i++) {
var pressedText = 'item' + i;
dataBlob.push(pressedText)
}
return dataBlob
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
);
}
}
- Switch ( checkbox )
- disabled
- onTintColor (开启状态时的背景颜色)
- thumbTintColor ( 开关上圆形按钮的背景颜色 )
- tintColor ( 关闭状态时的边框颜色(iOS)或背景颜色(Android) )
export default class AwesomeProject extends Component {
constructor(props) {
super(props)
this.state = {
switchState1: true
}
}
render() {
return (
<View>
<Switch onValueChange={this.onValueChange.bind(this)} value={this.state.switchState1} />
</View>
);
}
onValueChange(value) {
this.setState({
switchState1: value
})
alert(this.state.switchState1)
}
}
Event
- onPress( 按下， 短按 )
- onLongPress（长按）
- onLayout（获取当前元素的坐标和自身宽高等）
- onChange ( 当文本框内容变化时调用此回调函数 )
- onChangeText ( 当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。 )
