RN自定义PickerView

根据需求可以自定义为自己的格式，这份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 (<View />);
        } 
        else {
            return (
                <View style = {pickerStyles.container}>
                    <View style = {pickerStyles.mask}>
                    </View>
                    <Animated.View 
                        style = {[
                            pickerStyles.tip, 
                            {transform: [{translateY: this.state.offset.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [SystemHandler.windowSize.height, (SystemHandler.windowSize.height - 320)]
                                }),
                            }]}
                        ]}
                    >
                        <View style = {pickerStyles.tipTitleView}>
                            <Text style = {pickerStyles.cancelText} onPress = {this.cancel.bind(this)}>取消</Text>
                            <Text style = {pickerStyles.okText} onPress = {this.ok.bind(this)}>确定</Text>
                        </View>
                        <PickerIOS
                            style = {pickerStyles.picker}
                            selectedValue = {this.state.choice}
                            onValueChange = {choice => this.setState({choice: choice})}
                        >
                            {this.state.dataSource.map((aOption) => (
                                <PickerIOS.Item
                                    key = {aOption}
                                    value = {aOption}
                                    label = {aOption}
                                />
                            ))}
                        </PickerIOS>
                    </Animated.View>
                </View>
            );
        }
    }

    /****************************** 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标签对别忘了哦！