react-native-arenakit/sources/components/picker/index.js

为编写arena app中react native应用提供基础的ui及原生能力api支撑

import {
    Platform,
    NativeModules,
    NativeEventEmitter,
    View,
    TouchableOpacity
} from 'react-native';

import React from 'react';

let ios = Platform.OS === 'ios';
let android = Platform.OS === 'android';
let Picker = NativeModules.ArenaPickerManager;

import RootSiblings from 'react-native-root-siblings'

export default {

    init(options){
        let opt = {
            isLoop: false,
            pickerConfirmBtnText: '确认',
            pickerCancelBtnText: '取消',
            pickerTitleText: '',
            pickerConfirmBtnColor: [90,169,250, 1],
            pickerCancelBtnColor: [153, 153, 153, 1],
            pickerTitleColor: [20, 20, 20, 1],
            pickerToolBarBg: [255, 255, 255, 1],
            pickerBg: [255, 255, 255, 1],
            wheelFlex: [1, 1, 1],
            pickerData: [],
            selectedValue: [],
            onPickerConfirm(){},
            onPickerCancel(){},
            onPickerSelect(){},
            //4.0.12 add
            pickerToolBarFontSize: 16,
            pickerFontSize: 16,
            pickerFontColor: [31, 31 ,31, 1],
            ...options
        };

        this.options = options;
        let fnConf = {
            confirm: this.onConfirm.bind(this),
            cancel: this.onCancel.bind(this),
            select: opt.onPickerSelect
        };

        Picker._init(opt);
        //there are no `removeListener` for NativeAppEventEmitter & DeviceEventEmitter
        this.listener && this.listener.remove();
        this.listener = new NativeEventEmitter(Picker).addListener("pickerEvent",(event)=>{
            fnConf[event['type']](event['selectedValue'], event['selectedIndex']);
        });
    },

    onConfirm(v) {
      if (this.options && this.options.onPickerConfirm) {
        this.options.onPickerConfirm(v);
        if (this.sibling && this.sibling.destroy) {
          this.sibling.destroy();
        }
      }
    },

    onCancel() {
      if (this.options && this.options.onPickerCancel) {
        this.options.onPickerCancel();
      }
      if (this.sibling && this.sibling.destroy) {
        this.sibling.destroy();
      }
    },

    show(){
        Picker.show();
        this.sibling = new RootSiblings(<TouchableOpacity activeOpacity={1} onPress={this.hide.bind(this)}
            style={{top: 0,right: 0,bottom: 0,left: 0,backgroundColor: 'rgba(0,0,0,0.4)'}}
        />);
    },

    hide(){
        Picker.hide();
        if (this.sibling && this.sibling.destroy) {
          this.sibling.destroy();
        }
    },

    select(arr, fn) {
        if(ios){
            Picker.select(arr);
        }
        else if(android){
            Picker.select(arr, err => {
                typeof fn === 'function' && fn(err);
            });
        }
    },

    toggle(){
        this.isPickerShow(show => {
            if(show){
                this.hide();
            }
            else{
                this.show();
            }
        });
    },

    isPickerShow(fn){
        //android return two params: err(error massage) and status(show or not)
        //ios return only one param: hide or not...
        Picker.isPickerShow((err, status) => {
            let returnValue = null;
            if(android){
                returnValue = err ? false : status;
            }
            else if(ios){
                returnValue = !err;
            }
            fn(returnValue);
        });
    }
};