react native仿微信PopupWindow效果的实例代码

react native仿微信PopupWindow效果的实例代码

在原生APP开发中，相信很多开发者都会见到这种场景：点击右上角更多的选项，弹出一个更多界面供用户选择。这种控件在原生开发中android可以用PopupWindow实现，在iOS中可以用CMPopTipView,也可以自己写一个View实现。其类似的效果如下图所示：

实现思路分析：

要实现上面的视图，有很多种实现方式。前面的文章说过，要实现弹框相关的可以用React Native 提供的 Modal组件(Modal组件)，使用Modal组件可以实现我们原生开发中的大多数效果。

要实现下拉三角，可以让美工切一个带下拉三角的背景，当然也可以自己通过ART实现（ART绘制）。对于选项卡的内容，在原生开发中为了适应更多的场景，我们一般会选择使用ListView组件，然后当点击某个Item的时候获得相应的属性即可。为了控制Modal的显示与消失，我们可以给Modal内置一个isVisible: this.props.show状态。

源码

要实现上面的效果，会这涉及到三个js文件：MorePopWidows.js、Utils.js、HomeActionBar.js，按照先后顺序，代码如下：

Utils.js

import {Dimensions} from 'react-native'

const deviceH = Dimensions.get('window').height

const deviceW = Dimensions.get('window').width

const baseEPgzZXnJEPx = 375

export default function px2dp(px) {

return px * deviceW / basePx

}

MorePopWidows.js

import React from 'react'

import {

StyleSheet,

Platform,

View,

Text,

Image,

TouchableOpacity,

Alert,

Modal,

Dimensions,

} from 'react-native'

import SpacingView from "./SpacingView";

import QRScanPage from "../home/QRScanPage";

const { width, height } = Dimensions.get('window');

import px2dp from '../util/Utils'

const mTop = px2dp(Platform.OS == "ios" ? 64 : 44)

let mwidth = 95;

let mheight = 100;

const marginTop = mTop;

export default class MorePopWidows extends React.Component {

constructor(props) {

super(props);

this.state = {

isVisible: this.props.show,

}

mwidth = this.props.width ;

mheight = this.props.height ;

}

componentWillReceiveProps(nextProps) {

this.setState({ isVisible: nextProps.show });

}

closeModal() {

this.setState({

isVisible: false

});

this.props.closeModal(false);

}

scan() {

this.props.navigator.push({

component: QRScanPage,

})

}

render() {

return (

transparent={true}

visible={this.state.isVisible}

animationType={'fade'}

onRequestClose={() => this.closeModal()}>

this.closeModal()}>

扫一扫

Alert.alert('点击了付款码')} style={styles.itemView}>

付款码

transparent={true}

visible={this.state.isVisible}

animationType={'fade'}

onRequestClose={() => this.closeModal()}>

this.closeModal()}>

扫一扫

Alert.alert('点击了付款码')} style={styles.itemView}>

付款码

)

}

}

const styles = StyleSheet.create({

container: {

width: width,

height: height,

},

modal: {

backgroundColor: '#696969',

width: mwidth,

height: mheight,

position: 'absolute',

left: width - mwidth - 10,

top: marginTop,

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: 20,

height: 20,

}

});

最后是在代码中使用MorePopWidows的代码：

HomeActionBar.js

/**

* https://github.com/facebook/react-native

* @flow 首页的标题栏

*/

import React, {Component} from 'react';

import {Platform, View, Dimensions, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';

import SelectCityPage from '../home/SelectCityPage'

import MorePopWidows from '../component/MorePopWidows'

import px2dp from '../util/Utils'

const isIOS = Platform.OS == "ios"

const {width, height} = Dimensions.get('window')

const headH = px2dp(isIOS ? 64 : 44)

export default class HomeActionBar extends Component {

constructor(props) {

super(props);

this.state = {

showPop: false,

}

}

city() {

this.props.navigator.push({

component: SelectCityPage,

})

}

renderHeader() {

return (

上海

source={require('../images/ic_arrow_down.png')}/>

输入商家、商品名称

{ this.setState({ showPop: !this.state.showPop }) }}>

source={require('../images/ic_scan_code_white.png')}/>

扫码

{

this.setState({showPop: show})

}} {...this.props}/>

)

}

render() {

return (

{this.renderHeader()}

);

}

}

const styles = StyleSheet.create({

headerStyle: {

backgroundColor: "#06C1AE",

height: headH,

paddingTop: px2dp(isIOS ? 20 : 0),

paddingHorizontal: 16,

flexDirection: 'row',

alignItems: 'center',

},

searchBar: {

width: width * 0.65,

height: 30,

borderRadius: 19,

marginLeft: 10,

flexDirection: 'row',

justifyContent: 'flex-start',

alignItems: 'center',

backgroundColor: 'white',

alignSelf: 'center',

paddingLeft: 10,

},

text: {

fontSize: 16,

color: '#ffffff',

justifyContent: 'center',

},

iconStyle: {

width: 22,

height: 22,

},

action: {

flexDirection: 'row',

justifyContent: 'center',

alignItems: 'center',

},

scanIcon: {

width: 28,

height: 28,

alignItems: 'center',

marginLeft: 10,

},

scanText: {

fontSize: 14,

color: '#ffffff',

justifyContent: 'center',

alignItems: 'center',

},

});

source={require('../images/ic_arrow_down.png')}/>

输入商家、商品名称

{ this.setState({ showPop: !this.state.showPop }) }}>

source={require('../images/ic_scan_code_white.png')}/>

扫码

{

this.setState({showPop: show})

}} {...this.props}/>

)

}

render() {

return (

{this.renderHeader()}

);

}

}

const styles = StyleSheet.create({

headerStyle: {

backgroundColor: "#06C1AE",

height: headH,

paddingTop: px2dp(isIOS ? 20 : 0),

paddingHorizontal: 16,

flexDirection: 'row',

alignItems: 'center',

},

searchBar: {

width: width * 0.65,

height: 30,

borderRadius: 19,

marginLeft: 10,

flexDirection: 'row',

justifyContent: 'flex-start',

alignItems: 'center',

backgroundColor: 'white',

alignSelf: 'center',

paddingLeft: 10,

},

text: {

fontSize: 16,

color: '#ffffff',

justifyContent: 'center',

},

iconStyle: {

width: 22,

height: 22,

},

action: {

flexDirection: 'row',

justifyContent: 'center',

alignItems: 'center',

},

scanIcon: {

width: 28,

height: 28,

alignItems: 'center',

marginLeft: 10,

},

scanText: {

fontSize: 14,

color: '#ffffff',

justifyContent: 'center',

alignItems: 'center',

},

});

source={require('../images/ic_scan_code_white.png')}/>

扫码

{

this.setState({showPop: show})

}} {...this.props}/>

)

}

render() {

return (

{this.renderHeader()}

);

}

}

const styles = StyleSheet.create({

headerStyle: {

backgroundColor: "#06C1AE",

height: headH,

paddingTop: px2dp(isIOS ? 20 : 0),

paddingHorizontal: 16,

flexDirection: 'row',

alignItems: 'center',

},

searchBar: {

width: width * 0.65,

height: 30,

borderRadius: 19,

marginLeft: 10,

flexDirection: 'row',

justifyContent: 'flex-start',

alignItems: 'center',

backgroundColor: 'white',

alignSelf: 'center',

paddingLeft: 10,

},

text: {

fontSize: 16,

color: '#ffffff',

justifyContent: 'center',

},

iconStyle: {

width: 22,

height: 22,

},

action: {

flexDirection: 'row',

justifyContent: 'center',

alignItems: 'center',

},

scanIcon: {

width: 28,

height: 28,

alignItems: 'center',

marginLeft: 10,

},

scanText: {

fontSize: 14,

color: '#ffffff',

justifyContent: 'center',

alignItems: 'center',

},

});

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。