1.通用的actionsheet组件库

原生只有actionsheetIOS弹框提醒,这对于Android的同学有可能是一种噩梦.
通用的第三方库如下：
react-native-actionsheet:下载地址

2.封装的原理

react-native-actionsheet的使用起来比较简单,但是有时候也要考虑项目架构的问题,不能随性的复制粘贴,会造成代码的冗余和逻辑的混乱.

二次封装原理:

介绍原理前需要考虑几个问题?

1.是否可以全局创建一个对象?

可行.通过createclass创建一个全局性actionsheet的对象,以方便其他地方调用.

2.是否支持动态改变actionsheet的内容?

可行.利用react 中的this.setState动态更新组件.

3.是否可以通过一个方法,传入需要更新的值,并且点击时把相对应的索引传入过来?

可行.通过函数指针的方式保存形参,然后在对应的时机回调出去.

考虑上面的问题后,就可以很方便的对相对应的组件库进行二次封装,优化项目的整体架构了,因为是帮出差的同事写的,不了解代码结构,但是如果想成为一个好的程序员,一定要懂得去思考这些问题.

3.最关键上代码

3.1 调用代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
    Alert
} from 'react-native';

import CustomActionSheet from './app/CustomActionSheet'


const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {

    constructor(props) {
        super(props)
        this.onPressModalButton = this.onPressModalButton.bind(this)
    };

    onPressModalButton () {
        this.CustomActionSheet.onShowCustomActionSheet('hello',['取消', '确认需求,开始跟进'],0,-1,(index,str) => {
            console.log(index+str);
        });
    };

    render() {
        return (
            <View style={styles.container}>
                <CustomActionSheet ref={o => this.CustomActionSheet = o} />
                <Button style={styles.modalbutton} title={"点击我弹框"} onPress={this.onPressModalButton}>default</Button>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    modalbutton: {
        width: 200,
        height: 44,
        backgroundColor: '#333333',

    }
});

3.2. CustomActionSheet.js文件内容

import React, {Component} from "react";
import ActionSheet from 'react-native-actionsheet'
import {
    Alert,
    DeviceEventEmitter,
    ActionSheetIOS
} from 'react-native'


class CustomActionSheet extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            selectIndex: 0,
            warmingTitle: '提示',
            optionLists: ['取消', '确认需求,开始跟进', '暂无需求', '目前使用竞品产品', '联系不上'],
            cancel_index: 0,
            destruc_index: -1,
        };
        this.onShowCustomActionSheet = this.onShowCustomActionSheet.bind(this)
        this.onPressIndex = this.onPressIndex.bind(this);
    }

    clickedCallBack() {

    };

    onShowCustomActionSheet(warmingTitle: Object, options: Object, cancelButtonIndex: Object,
                            destructiveButtonIndex: Object, callback: Function) {

        console.log('warmingTitle:' + warmingTitle + '\toptions:' + options + '\tcancelButtonIndex:' + cancelButtonIndex + '\tdestructiveButtonIndex:' + destructiveButtonIndex);
        this.ActionSheet.show();

        if (options != undefined && Object.prototype.toString.call(options) == '[object Array]' && options.length != 0) {
            this.setState = ({
                    optionLists: options
                }, () => this.ActionSheet.show()
            )
        }
        if (warmingTitle != undefined) {
            this.setState = ({
                    warmingTitle: warmingTitle
                }, () => this.ActionSheet.show()
            )
        }

        if (destructiveButtonIndex != undefined) {
            this.setState = ({
                    destruc_index: destructiveButtonIndex
                }, () => this.ActionSheet.show()
            )
        }

        if (cancelButtonIndex != undefined) {
            this.setState = ({
                    cancel_index: cancelButtonIndex,
                }, () => this.ActionSheet.show(),
            )
        }
        this.clickedCallBack = callback;
    };

    onPressIndex(index) {
        this.setState = {
            selectIndex: index
        }

        this.clickedCallBack(index, this.state.optionLists[index])
    };

    render() {
        return (
            <ActionSheet ref={o => this.ActionSheet = o} onPress={this.onPressIndex} title={this.state.warmingTitle}
                         options={this.state.optionLists} cancelButtonIndex={this.state.cancel_index}
                         destructiveButtonIndex={this.state.destruc_index}></ActionSheet>
        );
    }
}

export default CustomActionSheet;