根据需求可以自定义为自己的格式，这份demo的需求是：picker上面添加包含取消和确定的按钮视图。

具体如图：

image.png

上代码：

import React, { Component } from 'react';

import {

StyleSheet,

View,

Text,

Animated,

Easing,

PickerIOS,

} from 'react-native';

import SystemHandler from './SystemHandler';

export default class PickerView extends Component {

constructor(props) {

super(props);

this.state = {

offset: new Animated.Value(0),

opacity: new Animated.Value(0),

dataSource: [],

choice: this.props.defaultVal,

hide: true,

};

}

componentWillUnMount() {

this.timer && clearTimeout(this.timer);

}

render() {

if(this.state.hide) {

return ();

}

else {

return (

style = {[

pickerStyles.tip,

{transform: [{translateY: this.state.offset.interpolate({

inputRange: [0, 1],

outputRange: [SystemHandler.windowSize.height, (SystemHandler.windowSize.height - 320)]

}),

}]}

]}

>

取消

确定

style = {pickerStyles.picker}

selectedValue = {this.state.choice}

onValueChange = {choice => this.setState({choice: choice})}

>

{this.state.dataSource.map((aOption) => (

key = {aOption}

value = {aOption}

label = {aOption}

/>

))}

);

}

}

/****************************** event ******************************/

/******************** public ********************/

// 设置Pickerview的数据源数组

setDataSource(array) {

this.setState({

choice: array[0],

dataSource: array,

})

}

// 显示Pickerview

show() {

if(this.state.hide) {

this.setState({hide: false});

this.in();

}

}

/******************** private ********************/

// 显示动画

in() {

Animated.parallel([

Animated.timing(

this.state.opacity,

{

easing: Easing.linear,

duration: this.props.duration,

toValue: 0.8,

}

),

Animated.timing(

this.state.offset,

{

easing: Easing.linear,

duration: this.props.duration,

toValue: 1,

}

)

]).start();

}

//隐藏动画

out() {

Animated.parallel([

Animated.timing(

this.state.opacity,

{

easing: Easing.linear,

duration: this.props.duration,

toValue: 0,

}

),

Animated.timing(

this.state.offset,

{

easing: Easing.linear,

duration: this.props.duration,

toValue: 0,

}

)

]).start();

this.timer = setTimeout(() => {

this.setState({hide: true})

}, this.props.duration);

}

//取消

cancel(event) {

if(!this.state.hide) {

this.out();

}

}

//选择

ok() {

if(!this.state.hide) {

this.out();

if(this.props.okCallback) {

this.props.okCallback(this.state.choice);

}

}

}

}

const pickerStyles = StyleSheet.create({

container: {

position: 'absolute',

width: SystemHandler.windowSize.width,

height: SystemHandler.windowSize.height - 64,

},

mask: {

justifyContent: "center",

backgroundColor: "#383838",

opacity: 0.3,

position: "absolute",

width: SystemHandler.windowSize.width,

height: SystemHandler.windowSize.height - 64,

},

tip: {

width: SystemHandler.windowSize.width,

height: 260,

position: "absolute",

backgroundColor: '#f7f7f7',

alignItems: "center",

justifyContent: "space-between",

},

tipTitleView: {

height: 50,

width: SystemHandler.windowSize.width,

flexDirection: 'row',

alignItems: 'center',

justifyContent: 'space-between',

borderBottomWidth: 0.5,

borderColor: '#eeeeee',

backgroundColor: '#fff',

},

cancelText:{

color: '#ff9f45',

fontSize: 16,

paddingLeft: 30,

},

okText:{

color: '#ff9f45',

fontSize: 16,

paddingRight: 30,

fontWeight: 'bold',

},

picker:{

justifyContent: 'center',

height: 210,

width: SystemHandler.windowSize.width,

},

});

其中SystemHandler组件中定义了当前屏幕宽高的代码：

static windowSize = {

width: Dimensions.get('window').width,

height: Dimensions.get('window').height

}

若要适配安卓，则可将PickerIOS更换为Picker，对应的item标签对别忘了哦！