在原生APP开发中，相信很多开发者都会见到这种场景：点击右上角更多的选项，弹出一个更多界面供用户选择。这种控件在原生开发中Android可以用PopupWindow实现，在iOS中可以用CMPopTipView,也可以自己写一个View实现。其类似的效果如下图所示：
我们提供的服务有：网站制作、成都做网站、微信公众号开发、网站优化、网站认证、嘉祥ssl等。为上1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的嘉祥网站制作公司
实现思路分析：
要实现上面的视图，有很多种实现方式。前面的文章说过，要实现弹框相关的可以用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 basePx = 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 (
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 (
上海
输入商家、商品名称
{ this.setState({ showPop: !this.state.showPop }) }}>
扫码
{
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',
},
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
网页名称：reactnative仿微信PopupWindow效果的实例代码
网站链接：
http://cdkjz.cn/article/jjciph.html
