react-native-actionsheet

ActionSheetDemo.js

/**
 * mengqian02 20170615
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
} from 'react-native';

import ActionSheet from '@mfe/react-native-actionsheet';


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        backgroundColor: '#F5FCFF',
    },
    button: {
        marginTop: 20,
        height: 50,
        width: 300,
        backgroundColor: 'lightblue',
        justifyContent: 'center',
        alignItems: 'center',
    },
    title: {
        color: 'white',
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

const CANCEL_INDEX = 4;
const DESTRUCTIVE_INDEX = 2;
const options = ['Apple', 'Banana', 'Watermelon', 'Durian', '自己定义的取消'];
const title = 'Which one do you like?';


class VideoComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selected: '',
        };
        this.handlePress = this.handlePress.bind(this);
        this.cancelPress = this.cancelPress.bind(this);
        this.showActionSheet = this.showActionSheet.bind(this);
    }

    componentDidMount() {

    }

    handlePress(i) {
        this.setState({
            selected: i,
        });
        console.log('demo', i);
    }

    cancelPress() {
        console.log('cancelPress');
    }

    showActionSheet(index) {
        if (index === 1) {
            ActionSheet.showActionSheetWithOptions({
                title,
                message: 'Adding justifyContent to a component style determines the distribution of children along the primary axis. ',
                options,
                cancelButtonIndex: CANCEL_INDEX,
                destructiveButtonIndex: DESTRUCTIVE_INDEX,
                maskClosable: true,
            }, this.handlePress, this.cancelPress);
        } else if (index === 2) {
            ActionSheet.showActionSheetWithOptions({
                title,
                message: 'Adding justifyContent to a component style primary axis. ',
                options: ['苹果', '今日计划', 'Watermelon', 'Durian'],
                destructiveButtonIndex: DESTRUCTIVE_INDEX,
                maskClosable: true,
            }, this.handlePress, this.cancelPress);
        } else if (index === 3) {
            ActionSheet.showActionSheetWithOptions({
                title: '加入计划',
                options: ['今日计划', '明日计划'],
            }, this.handlePress);
        } else if (index === 4) {
            const img1 = require('./images/share_qq_logo.png');
            const img2 = require('./images/share_qzone_logo.png');
            const img3 = require('./images/share_weixin_circle_logo.png');
            const img4 = require('./images/share_weixin_friends_logo.png');
            ActionSheet.showActionSheetWithOptions({
                title: '分享',
                options: [
                    { image: img4, title: '微信好友' },
                    { image: img3, title: '朋友圈' },
                    { image: img1, title: 'qq好友' },
                    { image: img2, title: 'qq空间' },
                    { image: img1, title: 'qq好友' },
                    { image: img2, title: 'qq空间' },
                ],
            }, this.handlePress, this.cancelPress);
        }
    }


    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.button} onPress={this.showActionSheet.bind(this, 1)}>
                    <Text style={styles.title}>
                        Actionsheet 1
                    </Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.button} onPress={this.showActionSheet.bind(this, 2)}>
                    <Text style={styles.title}>
                        Actionsheet 2
                    </Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.button} onPress={this.showActionSheet.bind(this, 3)}>
                    <Text style={styles.title}>
                        Actionsheet 3
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={this.showActionSheet.bind(this, 4)}>
                    <Text style={styles.title}>
                        图片方式
                    </Text>
                </TouchableOpacity>
            </View>
        );
    }

}


export default VideoComponent;