在原生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  # PopupWindow  # React项目仿小红书首页保姆级实战教程  # React组件设计过程之仿抖音订单组件  # React Native仿美团下拉菜单的实例代码  # React模仿网易云音乐实现一个音乐项目详解流程  # 可以用  # 是在  # 说过  # 我们可以  # 弹出  # 可以实现  # 所示  # 涉及到  # 首页  # 一扫  # 上海  # 大家多多  # 选项卡  # 如下图  # 标题栏  # 有很多种  # SpacingView  # export  # Alert  # basePx 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  Laravel如何处理跨站请求伪造（CSRF）保护_Laravel表单安全机制与令牌校验  香港服务器租用每月最低只需15元？  C语言设计一个闪闪的圣诞树  百度浏览器如何管理插件 百度浏览器插件管理方法  EditPlus中的正则表达式 实战(1)  Laravel如何实现密码重置功能_Laravel密码找回与重置流程  谷歌浏览器如何更改浏览器主题 Google Chrome主题设置教程  如何用VPS主机快速搭建个人网站？  PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  如何在宝塔面板中修改默认建站目录？  Laravel如何实现用户密码重置功能？（完整流程代码）  Win11怎样安装网易有道词典_Win11安装词典教程【步骤】  创业网站制作流程,创业网站可靠吗？  Laravel怎么创建控制器Controller_Laravel路由绑定与控制器逻辑编写【指南】  如何用AI一键生成爆款短视频文案？小红书AI文案写作指令【教程】  Laravel怎么在Blade中安全地输出原始HTML内容  浅谈javascript alert和confirm的美化  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的，背景音乐、音效等？  Win11怎么关闭透明效果_Windows11辅助功能视觉效果设置  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  公司门户网站制作流程,华为官网怎么做？  Laravel如何实现文件上传和存储？（本地与S3配置）  详解Android——蓝牙技术 带你实现终端间数据传输  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  音乐网站服务器如何优化API响应速度？  javascript基本数据类型及类型检测常用方法小结  英语简历制作免费网站推荐,如何将简历翻译成英文？  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  如何用景安虚拟主机手机版绑定域名建站？  如何批量查询域名的建站时间记录？  网站页面设计需要考虑到这些问题  zabbix利用python脚本发送报警邮件的方法  Win10如何卸载预装Edge扩展_Win10卸载Edge扩展教程【方法】  北京网页设计制作网站有哪些,继续教育自动播放怎么设置？  如何用PHP快速搭建CMS系统？  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？  详解jQuery中的事件  打开php文件提示内存不足_怎么调整php内存限制【解决方案】  Laravel Eloquent模型如何创建_Laravel ORM基础之Model创建与使用教程  高性能网站服务器配置指南：安全稳定与高效建站核心方案  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  QQ浏览器网页版登录入口 个人中心在线进入  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？  Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  js实现获取鼠标当前的位置