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>
    }
}