React-Native学习笔记之:弹框框架Popover简单使用

  React Native中的Popover框架实现的效果就类似于Android原生的Spinner或PopWindow实现的下拉框效果,
 开源框架地址:https://www.npmjs.com/package/react-native-popover
import React, {Component} from "react";
import {
    StyleSheet,
    View,
    TouchableOpacity,
    TouchableHighlight,
    Text,
    Image
} from "react-native";
import Popover from './Popover'
import Toast, {DURATION} from 'react-native-easy-toast';
var spinnerTextArray = ['深圳南山', '深圳宝安', '深圳罗湖', '深圳福田']
//Popover开源地址:https://www.npmjs.com/package/react-native-popover
export default class PopoverDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            //下拉列表是否可见
            isVisible: false,
            //下拉列表大小范围
            spinnerRect: {},
        }
    }

    //显示下拉列表
    showSpinner() {
        this.refs.spinner.measure((ox, oy, width, height, px, py) => {
            this.setState({
                isVisible: true,
                spinnerRect: {x: px, y: py, width: width, height: height}
            });
        });
    }

    //隐藏下拉列表
    closeSpinner() {
        this.setState({
            isVisible: false
        });
    }

    //下拉列表每一行点击事件
    onItemClick(spinnerItem) {
        this.closeSpinner();
        this.toast.show(spinnerItem, DURATION.LENGTH_SHORT);
    }

    //TouchableOpacity用于封装视图,使其可以正确响应触摸操作
    //ref使用参考http://blog.csdn.net/jiangbo_phd/article/details/51758148
    render() {
        return <View style={{flex:1,alignItems:'center'}}>
            <TouchableOpacity
                ref='spinner'
                style={{flexDirection:'row',alignItems:'center',marginTop:10}}
                underlayColor='transparent'
                onPress={()=>this.showSpinner()}>
                <Text>
                    点击可以弹出下拉菜单
                </Text>
                <Image source={require('./image/down.png')}/>
            </TouchableOpacity>
            <Popover
                //设置可见性
                isVisible={this.state.isVisible}
                //设置下拉位置
                fromRect={this.state.spinnerRect}
                placement="bottom"
                //点击下拉框外范围关闭下拉框
                onClose={()=>this.closeSpinner()}
                //设置内容样式
                contentStyle={{opacity:0.82,backgroundColor:'#343434'}}
                style={{backgroundColor: 'red'}}>
                <View style={{alignItems: 'center'}}>
                    {spinnerTextArray.map((result, i, arr) => {
                        return <TouchableHighlight key={i} onPress={()=>this.onItemClick(arr[i])}
                                                   underlayColor='transparent'>
                            <Text
                                style={{fontSize: 18,color:'white', padding: 8, fontWeight: '400'}}>
                                {arr[i]}
                            </Text>
                        </TouchableHighlight>
                    })
                    }
                </View>
            </Popover>
            <Toast ref={toast=>{
                       this.toast=toast
                    }}/>
        </View>
    }
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值