React-Native自定義PopupWindow實作

轉載請注明出處:王亟亟的大牛之路

自從泰國回來就忙的不行，各種開會，各種方案，各種報告。學習進度有些受阻，回家時間也比較晚整個人的狀态也不是很高效，不如好好休息。

今天下午強行擠了2小時把組裡的一個小元件開源下，勉強算擠出一些産能吧。

安利位址：

Useful-Open-Source-Android 安卓收納”褲”

Useful-Open-Source-React-Native React-Native收納”褲”

雖然手頭事情比較多，但是我還是盡量保持每日一更，每天都要有所收獲！

運作效果：

實作思路：

外觀:

三角形的”箭頭”圖形+一個視圖組

外觀實作:

因為設計的原因整個pop成為了2個個體，一個是三角，一個就是具體内容窗體。

三角可以使用切圖，但是自己用ART.Path()實作拓展性更好，畢竟不用因為超大屏手機去做代碼修改。

下面一部分就是一個正常的

<View>多個<TouchableOpacity/></View>

(這裡沒用listview來實作清單，各位看官也可以自行修改，修改成本不是很高，畢竟js可以傳方法，是以點選行為也可以傳props解決)

事件:

展現/消失由外層容器控制，控件内對應字段為

isVisible: this.props.show

使用與分析:

源碼位址：react-native-popupWindow

團隊開源内容位址(我們會繼續努力):https://github.com/PacteraOpenSourceGroup

控件産出:wwl901215

ok,流程走完 我們讀一下這個彈窗控件的源碼(标注是我發文前加的，給新手學習了解用，如果影響高端玩家讀源碼抱歉)

如何使用(第一版，暫不考慮釋出npm)

實際使用

<MenuPopWindow width={} height={} show={this.state.showPop} closeModal={(show) => { this.setState({ showPop: show }) }} dataArray={['第一!!', '第二!!', '第三!!']} />
           

import React from 'react'
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Alert,//彈窗
    Modal,
    Dimensions,//用于擷取裝置螢幕的寬高
    ART,//繪圖,Android預設就包含ART庫，IOS需要單獨添加依賴庫
} from 'react-native'
const { width, height } = Dimensions.get('window');
let mwidth = ;
let mheight = ;
const bgColor = '#2d2d2d';//背景色,沒有設定外部傳入
const top = ;
let dataArray;//清單資料源
export default class MenuModal extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.show,
        }
        //資料傳遞
        mwidth = this.props.width || ;
        mheight = this.props.height || ;
        dataArray = this.props.dataArray;
    }

    componentWillReceiveProps(nextProps) {
        this.setState({ isVisible: nextProps.show });
    }
    //處理狀态
    closeModal() {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
    }

    render() {
        //繪制路徑
        const path = ART.Path();
        path.moveTo(width -  - mwidth *  /  + , top);
        path.lineTo(width -  - mwidth *  /  + , top - );
        path.lineTo(width -  - mwidth *  /  + , top);
        path.close();
        return (
            <View style={styles.container}>
                <Modal
                    transparent={true}
                    visible={this.state.isVisible}
                    //動畫效果類型
                    animationType={'fade'}
                    onRequestClose={() => this.closeModal()}>
                    <TouchableOpacity style={styles.container} activeOpacity={} onPress={() => this.closeModal()}>
                        <ART.Surface width={width} height={} >
                            <ART.Shape d={path} fill={bgColor} />
                        </ART.Surface>
                        <View style={styles.modal}>
                            <TouchableOpacity activeOpacity={} onPress={() => Alert.alert('點選了第1個')} style={styles.itemView}>
                                <Image style={styles.imgStyle} source={require('../res/icon_qr.png')} />
                                <Text style={styles.textStyle}>{dataArray[]}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity activeOpacity={} onPress={() => Alert.alert('點選了第2個')} style={[styles.itemView, { borderColor: '#999', borderTopWidth: , borderBottomWidth:  }]}>
                                <Image style={styles.imgStyle} source={require('../res/icon_qr.png')} />
                                <Text style={styles.textStyle}>{dataArray[]}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity activeOpacity={} onPress={() => Alert.alert('點選了第3個')} style={styles.itemView}>
                                <Image style={styles.imgStyle} source={require('../res/icon_qr.png')} />
                                <Text style={styles.textStyle}>{dataArray[]}</Text>
                            </TouchableOpacity>
                        </View>
                    </TouchableOpacity>
                </Modal>
            </View>
        )
    }
}
//樣式鍊
const styles = StyleSheet.create({
    container: {
        width: width,
        height: height,
    },
    modal: {
        backgroundColor: bgColor,
        // opacity:,
        width: mwidth,
        height: mheight,
        position: 'absolute',
        left: width - mwidth - ,
        top: top,
        padding: ,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: ,
    },
    itemView: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        flex: ,
    },
    textStyle: {
        color: '#fff',
        fontSize: ,
        marginLeft: ,
    },
    imgStyle: {
        width: ,
        height: ,
    }
});
           

有問題可以微信聯系我，基佬勿擾哦（活體，非公衆号）！