在原生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 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 (
<View style={styles.container}>
<Modal
transparent={true}
visible={this.state.isVisible}
animationType={'fade'}
onRequestClose={() => this.closeModal()}>
<TouchableOpacity style={styles.container} activeOpacity={1} onPress={() => this.closeModal()}>
<View style={styles.modal}>
<TouchableOpacity activeOpacity={1} onPress={this.scan.bind(this)} style={styles.itemView}>
<Image style={styles.imgStyle} source={require('../images/ic_scan_code_white.png')} />
<Text style={styles.textStyle}>扫一扫</Text>
</TouchableOpacity>
<SpacingView/>
<TouchableOpacity activeOpacity={1} onPress={() => Alert.alert('点击了付款码')} style={styles.itemView}>
<Image style={styles.imgStyle} source={require('../images/ic_code_white.png')} />
<Text style={styles.textStyle}>付款码</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</Modal>
</View>
)
}
}
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 (
<View >
<View style={styles.headerStyle}>
<TouchableOpacity style={styles.action} onPress={this.city.bind(this)}>
<Text style={styles.text}>上海</Text>
<Image
source={require('../images/ic_arrow_down.png')}/>
</TouchableOpacity>
<TouchableOpacity style={styles.searchBar}>
<Image source={require('../images/ic_search.png')} style={styles.iconStyle}/>
<Text style={{fontSize: 13, color: "#666", marginLeft: 5}}>输入商家、商品名称</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.action} onPress={() => { this.setState({ showPop: !this.state.showPop }) }}>
<Image style={styles.scanIcon}
source={require('../images/ic_scan_code_white.png')}/>
<Text style={styles.scanText}>扫码</Text>
</TouchableOpacity>
</View>
<View style={{ position: 'absolute', top: headH, left: 0, width: width, height: height }}>
<MorePopWidows width={90} height={100} show={this.state.showPop} closeModal={(show) => {
this.setState({showPop: show})
}} {...this.props}/>
</View>
</View>
)
}
render() {
return (
<View>
{this.renderHeader()}
</View>
);
}
}
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',
},
});
相关推荐
本文将深入探讨React Native的触摸事件机制,并展示如何利用这一机制实现类似微信通讯录的功能。 首先,我们要了解React Native中的触摸事件系统。与Web开发中的点击事件不同,React Native使用了一套基于 ...
在React Native中,为了实现类似原生Android的PopupWindow或iOS的CMPopTipView效果,开发者可以利用React Native提供的Modal组件。本实例旨在创建一个仿微信的弹出窗口,展示更多的选项供用户选择。以下是对实现这个...
navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室——RN_ChatRoom,实现了原生app启动页、AsyncStorage本地存储登录拦截、集成rnPop模态框功能(仿微信popupWindow弹窗菜单
React Native是一种流行的JavaScript框架,用于构建原生移动应用,而`react-native-wechat`则是针对React Native的微信SDK封装,使得开发者能够轻松地与微信平台进行交互,包括微信登录、支付等。 首先,我们需要...
一、效果:我们看到很多软件的通讯录在右侧都有一个字母索引功能,像微信,小米通讯录,QQ,还有美团选择地区等等。这里我截了一张美团选择城市的图片来看看; 我们今天就来实现图片中右侧模块的索引功能,包括触摸...
在这个实例中,我们将探讨如何利用React Native来实现登录功能以及创建一个仿微信Tab界面。 首先,登录功能在任何应用程序中都是至关重要的。在React Native中,你可以使用各种库来处理用户认证,例如`react-native...
React本机支付 入门 $ npm install react-...$ react-native link react-native-puti-pay 手动安装 的iOS 在XCode的项目导航器中,右键单击“ Libraries ➜ Add Files to [your project's name] 转到node_modules re
本项目基于ReactNative和TypeScript开发,包含532个文件,包括PNG图片、JavaScript脚本、C源代码、MATLAB脚本、...系统实现了基于ReactNative的高仿微信客户端的功能,界面友好,功能完善,适合用于微信客户端的复刻。
react native 实现水波纹效果,效果非常棒哦
纯RN仿微信悬浮窗口 运行这个项目 npm install react-native run-ios或react-native run-android 用法 步骤1 npm install react-native-root-siblings 第2步 将SuspensionWindow浮动块拖动到自己的浮动块上 第三...
React Native仿美团项目是一个使用JavaScript开发的混合移动应用示例,它展示了如何利用React Native框架构建类似美团的应用。React Native是Facebook推出的一个开源框架,它允许开发者使用JavaScript编写原生移动...
5、使用react-native-video、react-native-orientation实现视频新闻详情页功能 6、安卓下添加了对GIF图片的支持(IOS默认支持) 7、"我的"页面添加了RN动画 注:RN版本为最新的 0.54.2,使用的第三方库也都是当前主流...
5. **自定义样式**:为了达到仿支付宝的效果,我们需要使用CSS(或者React Native的样式API)进行高度定制。这包括输入框的形状、颜色、边框、动画效果等。可以使用`StyleSheet.create`来创建可复用的样式对象。 6....
在这个“React-native 仿豆瓣电影 app”的项目中,我们将探讨如何利用 React Native 的特性来创建一个类似豆瓣电影的应用,从而深入理解 React Native 在混合移动开发中的应用。 首先,React Native 基于 ...
React Native仿ofo共享单车App是基于JavaScript开发的混合移动应用,它利用了Facebook推出的React Native框架,该框架允许开发者使用JavaScript和React库构建原生的iOS和Android应用程序。这个项目旨在模仿ofo共享...
React Native Debugger是一款强大的开发工具,特别为在macOS平台上进行React和React Native应用的可视化调试而设计。它提供了丰富的功能,使开发者能够更有效地检查、调试和优化代码,尤其是在处理复杂的Redux状态...
在React Native中,我们可以利用`react-native-swiper`库来创建滑动卡片效果,或者自定义触摸事件来控制卡片的切换。 在项目结构中,你可能会看到以下关键文件: 1. `App.js`:这是应用的入口文件,通常包含根组件...