版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/teagreen_red/article/details/78406827
本文将介绍三个常用的组件Picker、Switch、Slider，它们都是官方提供的，并且均可以在android与ios渲染对应的原生组件。这三个组件的使用很简单，在实战开发中也很常见，因此这里放在一起介绍。
Picker选择器
Picker选择器，通常可用作下拉菜单，城市选择器等。
其使用方法如下：
import React, { Component } from 'react';
import { AppRegistry, Text, View,Picker } from 'react-native';
export default class PickerDemo extends Component {
constructor(props) {
super(props);
this.state ={
language:null,
};
}
render() {
return (
<Picker
selectedValue={this.state.language}
onValueChange={(lang) => this.setState({language: lang})}
style={{width:200}}
>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
);
}
}效果图
属性方法
| 属性 | 类型 | 描述 |
|---|---|---|
| onValueChange | function | 当选择器item被选中时调用，可传两个参数：选择的value和position |
| selectedValue | any | 选择器默认选中的值，可以是字符串或数字 |
| enabled(android) | bool | |
| mode(android) | enum (‘dialog’,’dropdown’) | 设置样式, ‘dropdown’下拉样式和’dialog’弹窗样式，默认是dialog |
| prompt(android) | string | 设置Picker标题,并且只有是mode为dialog才会显示 |
| itemStyle(ios) | itemStylePropType | 设置每一项的样式 |
Switch开关按钮
Switch开关，用于开/关两种状态的选择组件。
其使用方法如下：
import React, { Component } from 'react';
import { AppRegistry, Text, View,Switch,StyleSheet } from 'react-native';
export default class SwitchDemo extends Component {
constructor(props) {
super(props);
this.state ={
switchState1: true,
switchState2: false,
};
}
render() {
return (
<View style={styles.container}>
<Switch style={{marginTop:10, marginBottom:10, backgroundColor:'transparent'}}
value={this.state.switchState1}
onValueChange={ (value) => this.setState({switchState1:value}) }
onTintColor='red'
thumbTintColor='yellow'
tintColor='orange'
/>
<Switch value={this.state.switchState2}
onValueChange={ (value) => this.setState({switchState2:value})}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
justifyContent:'center',
alignItems:'center',
backgroundColor:'white',
flex: 1
},
});效果图
属性方法
| 属性 | 类型 | 描述 |
|---|---|---|
| disabled | bool | 是否禁用开关组件，默认是false |
| onValueChange | function | 当组件状态值发生变化的时候回调 |
| value | bool | 该开关的值，如果为true呈打开状态，默认false |
| onTintColor | color | 开关开启状态背景颜色 |
| thumbTintColor | color | 开关圆形部位的颜色 |
| tintColor | color | 开关关闭状态背景颜色 |
Slider滑动条
Slider滑动条，用于选择一个范围值的组件。
其使用方法如下：
import React, { Component } from 'react';
import { AppRegistry, Text, View,Slider,StyleSheet } from 'react-native';
export default class SwitchDemo extends Component {
constructor(props) {
super(props);
this.state ={
value:0,
};
}
render() {
return (
<View style={{flex:1}}>
<Slider />
<Slider disabled={true}/>
<Slider value={0.3} maximumTrackTintColor='black'/>
<Slider value={0.4} minimumTrackTintColor='red'/>
<Slider value={0.5} style={{borderWidth:1,borderColor:'red'}}/>
<Text>{this.state.value}</Text>
<Slider minimumValue={5} maximumValue={20} onValueChange={(value)=>{this.setState({value:value})}} onSlidingComplete={(value)=>{this.setState({value:value})}}/>
<Slider thumbTintColor="red" step={0.2}/>
</View>
);
}
}效果图
属性方法
| 属性 | 类型 | 描述 |
|---|---|---|
| disabled | bool | 是否禁用该组件，默认是false |
| maximumValue | number | 滑动条最大值。默认为1 |
| minimumValue | number | 滑动条最小值，默认为0 |
| onSlidingComplete | function | 当用户结束滑动的时候回调此方法 |
| onValueChange | function | 当用户在滑动过程中持续回调此方法 |
| step | number | 滑动条的最小单位。这个值应该在0到(maximumValue - minimumValue)之间。默认为0 |
| value | number | 滑动条选择的值。这个值应该在最小值和最大值之间，它们的默认值分别为0和1。默认值为0 |
| thumbImage | Image.propTypes.source | 给滑块设置一张图片。只支持静态图片 |
| trackImage | Image.propTypes.source | 给轨道设置一张背景图。只支持静态图片。图片最中央的像素会被平铺直至填满轨道 |
| thumbTintColor(android) | ColorPropType | 设置圆形部位的颜色 |