ActionSheetAndroid

ActionSheet.js

/**
 * @file ActionSheet API
 * @author zdying
 * @providesModule ActionSheet
 */

import React, {Component} from 'react';
import {Modal, Text, View, TouchableWithoutFeedback} from 'react-native';

export default class ActionSheet extends Component {
    constructor(props, state){
        super(props, state);

        global.__action_sheet = this;

        this.state = {
            visible: false
        }
    }

    show(message){
        this.setState({
            visible: true,
            message
        })
    }

    hide(){
        this.setState({
            visible: false
        })
    }

    render(){
        return (
            <Modal visible={this.state.visible} transparent={true}>
                <TouchableWithoutFeedback onPress={this.hide.bind(this)} style={{
                    flex: 1,
                    backgroundColor: 'red',
                    marginTop: 20
                }}>
                    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0, 0, 0, 0.4)'}}>
                        <Text style={{color: 'white'}}>
                            {this.state.message}
                        </Text>
                    </View>
                </TouchableWithoutFeedback>
            </Modal>
        )
    }
}

ActionSheet.show = (msg) => {
    global.__action_sheet.show(msg);
}

ActionSheet.hide = (msg) => {
    global.__action_sheet.hide();
}

global.ActionSheet = ActionSheet;