轉(zhuǎn)載請注明出處:王亟亟的大牛之路
自從泰國回來就忙的不行，各種開會(huì)，各種方案猿推，各種報(bào)告跑慕。學(xué)習(xí)進(jìn)度有些受阻，回家時(shí)間也比較晚整個(gè)人的狀態(tài)也不是很高效贴妻，不如好好休息。
今天下午強(qiáng)行擠了2小時(shí)把組里的一個(gè)小組件開源下，勉強(qiáng)算擠出一些產(chǎn)能吧阐斜。
安利地址：
Useful-Open-Source-Android 安卓收納"褲"
Useful-Open-Source-React-Native React-Native收納"褲"
雖然手頭事情比較多，但是我還是盡量保持每日一更诀紊，每天都要有所收獲谒出！
運(yùn)行效果：
實(shí)現(xiàn)思路：
外觀:
三角形的"箭頭"圖形+一個(gè)視圖組
外觀實(shí)現(xiàn):
因?yàn)樵O(shè)計(jì)的原因整個(gè)pop成為了2個(gè)個(gè)體，一個(gè)是三角，一個(gè)就是具體內(nèi)容窗體笤喳。
三角可以使用切圖为居，但是自己用ART.Path()實(shí)現(xiàn)拓展性更好，畢竟不用因?yàn)槌笃潦謾C(jī)去做代碼修改杀狡。
下面一部分就是一個(gè)正常的<View>多個(gè)<TouchableOpacity/></View>
(這里沒用listview來實(shí)現(xiàn)列表蒙畴，各位看官也可以自行修改，修改成本不是很高呜象，畢竟js可以傳方法忍抽，所以點(diǎn)擊行為也可以傳props解決)
事件:
展現(xiàn)/消失由外層容器控制，控件內(nèi)對應(yīng)字段為isVisible: this.props.show
使用與分析:
團(tuán)隊(duì)開源內(nèi)容地址(我們會(huì)繼續(xù)努力):https://github.com/PacteraOpenSourceGroup
控件產(chǎn)出:wwl901215
ok,流程走完 我們讀一下這個(gè)彈窗控件的源碼(標(biāo)注是我發(fā)文前加的董朝，給新手學(xué)習(xí)理解用鸠项，如果影響高端玩家讀源碼抱歉)
如何使用(第一版，暫不考慮發(fā)布npm)
import MenuPopWindow from '你存放的位置'
實(shí)際使用
<MenuPopWindow width={60} height={100} show={this.state.showPop} closeModal={(show) => { this.setState({ showPop: show }) }} dataArray={['第一!!', '第二!!', '第三!!']} />
import React from 'react'
import {
StyleSheet,
View,
Text,
Image,
TouchableOpacity,
Alert,//彈窗
Modal,
Dimensions,//用于獲取設(shè)備屏幕的寬高
ART,//繪圖,Android默認(rèn)就包含ART庫子姜，IOS需要單獨(dú)添加依賴庫
} from 'react-native'
const { width, height } = Dimensions.get('window');
let mwidth = 70;
let mheight = 100;
const bgColor = '#2d2d2d';//背景色,沒有設(shè)置外部傳入
const top = 50;
let dataArray;//列表數(shù)據(jù)源
export default class MenuModal extends React.Component {
constructor(props) {
super(props);
this.state = {
isVisible: this.props.show,
}
//數(shù)據(jù)傳遞
mwidth = this.props.width || 70;
mheight = this.props.height || 100;
dataArray = this.props.dataArray;
}
componentWillReceiveProps(nextProps) {
this.setState({ isVisible: nextProps.show });
}
//處理狀態(tài)
closeModal() {
this.setState({
isVisible: false
});
this.props.closeModal(false);
}
render() {
//繪制路徑
const path = ART.Path();
path.moveTo(width - 10 - mwidth * 1 / 3 + 3, top);
path.lineTo(width - 10 - mwidth * 1 / 3 + 9, top - 7);
path.lineTo(width - 10 - mwidth * 1 / 3 + 15, top);
path.close();
return (
<View style={styles.container}>
<Modal
transparent={true}
visible={this.state.isVisible}
//動(dòng)畫效果類型
animationType={'fade'}
onRequestClose={() => this.closeModal()}>
<TouchableOpacity style={styles.container} activeOpacity={1} onPress={() => this.closeModal()}>
<ART.Surface width={width} height={100} >
<ART.Shape d={path} fill={bgColor} />
</ART.Surface>
<View style={styles.modal}>
<TouchableOpacity activeOpacity={1} onPress={() => Alert.alert('點(diǎn)擊了第1個(gè)')} style={styles.itemView}>
<Image style={styles.imgStyle} source={require('../res/icon_qr.png')} />
<Text style={styles.textStyle}>{dataArray[0]}</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity={1} onPress={() => Alert.alert('點(diǎn)擊了第2個(gè)')} style={[styles.itemView, { borderColor: '#999', borderTopWidth: 1, borderBottomWidth: 1 }]}>
<Image style={styles.imgStyle} source={require('../res/icon_qr.png')} />
<Text style={styles.textStyle}>{dataArray[1]}</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity={1} onPress={() => Alert.alert('點(diǎn)擊了第3個(gè)')} style={styles.itemView}>
<Image style={styles.imgStyle} source={require('../res/icon_qr.png')} />
<Text style={styles.textStyle}>{dataArray[2]}</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</Modal>
</View>
)
}
}
//樣式鏈
const styles = StyleSheet.create({
container: {
width: width,
height: height,
},
modal: {
backgroundColor: bgColor,
// opacity:0.8,
width: mwidth,
height: mheight,
position: 'absolute',
left: width - mwidth - 10,
top: top,
padding: 5,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 3,
},
itemView: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
textStyle: {
color: '#fff',
fontSize: 14,
marginLeft: 2,
},
imgStyle: {
width: 12,
height: 12,
}
});
感謝各位觀眾老爺祟绊！
