Picker选择器,可以自由创建Item用来选择
主要属性:
selectedValue:选择的值,可以是value属性值
onValueChange:方法,提供两个参数,一个是被选中项的value属性,一个是索引位置
<Picker.Item/>:为picker的item
创建一个picker:
<Picker style={{width: 300, height: 200, backgroundColor: "#ffaaff"}}
selectedValue={this.state.language}
onValueChange={(lang)=>this.setState({language: lang})}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
<Picker.Item label="Swift" value="swift" />
<Picker.Item label="Object-c" value="oc" />
<Picker.Item label="Php" value="php" />
<Picker.Item label="Html" value="html" />
<Picker.Item label="Css" value="css" />
<Picker.Item label="C++" value="c++" />
</Picker>
PickerIOS针对于iOS版本的picker
主要属性没变
创建一个PickerIOS:
CAR_MAKES_AND_MODELS参数可以在完整代码中查看
<PickerIOS style={{width: 300, height: 200, backgroundColor: '#11fff1'}}
selectedValue={this.state.carMake}
onValueChange={(itemValue)=>this._iosValue11(itemValue)}
>
{
Object.keys(CAR_MAKES_AND_MODELS).map((carmake)=>(
<Picker.ItemIOS
key={carmake}
value={carmake}
label={CAR_MAKES_AND_MODELS[carmake].name}
/>
))
}
</PickerIOS>
完整代码:
import React, { Component } from 'react';
import {
AppRegistry,
Picker,
PickerIOS,
View
} from 'react-native';
var CAR_MAKES_AND_MODELS = {
amc: {
name: 'AMC',
models: ['AMX', 'Concord', 'Eagle', 'Gremlin', 'Matador', 'Pacer'],
},
alfa: {
name: 'Alfa-Romeo',
models: ['159', '4C', 'Alfasud', 'Brera', 'GTV6', 'Giulia', 'MiTo', 'Spider'],
},
aston: {
name: 'Aston Martin',
models: ['DB5', 'DB9', 'DBS', 'Rapide', 'Vanquish', 'Vantage'],
},
};
export default class RNPickerView extends Component {
constructor(props){
super(props);
this.state = {
language: 'java',
selectCount: 0,
carMake: 'amc',
}
}
_pickerView = ()=>{
return(
<Picker style={{width: 300, height: 200, backgroundColor: "#ffaaff"}}
selectedValue={this.state.language}
onValueChange={(lang)=>this.setState({language: lang})}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
<Picker.Item label="Swift" value="swift" />
<Picker.Item label="Object-c" value="oc" />
<Picker.Item label="Php" value="php" />
<Picker.Item label="Html" value="html" />
<Picker.Item label="Css" value="css" />
<Picker.Item label="C++" value="c++" />
</Picker>
)
};
_iosValue11 = (item)=> {
console.log('_iosValue11' + item);
this.setState({
carMake: item
})
};
_iosValue22 = (item)=> {
console.log('_iosValue22' + item);
this.setState({
selectCount: item
})
};
_pickerIOS = ()=>{
let make = CAR_MAKES_AND_MODELS[this.state.carMake];
let selectIndex = make.name + ' ' + make.models[this.state.selectCount];
return(
<View>
<PickerIOS style={{width: 300, height: 200, backgroundColor: '#11fff1'}}
//这里的selectedValue选择的是value
selectedValue={this.state.carMake}
//onValueChange中的传递参数是value属性,保证和selectedValue的属性一样
onValueChange={(itemValue)=>this._iosValue11(itemValue)}
>
{
//这里是有map函数变量了CAR_MAKES_AND_MODELS对象中的keys值
Object.keys(CAR_MAKES_AND_MODELS).map((carmake)=>(
<Picker.ItemIOS
key={carmake}
value={carmake}
label={CAR_MAKES_AND_MODELS[carmake].name}
/>
))
}
</PickerIOS>
<PickerIOS style={{width: 300, height: 200, backgroundColor: '#11fff1'}}
//selectedValue 选择的是索引位置
selectedValue={this.state.selectCount}
//onValueChange中的传递参数是value属性,保证和selectedValue的属性一样,这里的value是索引位置
onValueChange={(itemValue)=>this._iosValue22(itemValue)}>
{
//这里map遍历的是models数组,modelName为数组的value,modelIndex数组位置
CAR_MAKES_AND_MODELS[this.state.carMake].models.map((modelName, modelIndex)=>(
<Picker.ItemIOS
key={this.state.carMake + '_' + modelIndex}
value={modelIndex}
label={modelName}
/>
))
}
</PickerIOS>
</View>
)
};
render() {
return(
<View style={{flex: 1, backgroundColor: "#aaffaa", alignItems: 'center', justifyContent: 'center'}}>
{this._pickerView()}
{this._pickerIOS()}
</View>
)
}
}
AppRegistry.registerComponent('RNPickerView', ()=> RNPickerView);
效果图: