react-native-popover, 用于响应本机的<Popover/> 组件

分享于 

4分钟阅读

GitHub

  繁體 雙語
A component for react-native
  • 源代码名称:react-native-popover
  • 源代码网址:http://www.github.com/jeanregisser/react-native-popover
  • react-native-popover源代码文档
  • react-native-popover源代码下载
  • Git URL:
    git://www.github.com/jeanregisser/react-native-popover.git
    Git Clone代码到本地:
    git clone http://www.github.com/jeanregisser/react-native-popover
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/jeanregisser/react-native-popover
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    react-native-popover

    npm versionnpm versionnpm licence

    用于响应本机的<Popover> 组件。 这仍然是一个正在进行中的工作,只处理最简单的情况,想法和贡献是非常受欢迎的。

    Demo

    安装

    npm i --save react-native-popover

    用法

    'use strict';varReact =require('react');varPopover =require('react-native-popover');var { AppRegistry, StyleSheet, Text, TouchableHighlight, View,
    } =require('react-native');varPopoverExample =React.createClass({
     getInitialState() {
     return {isVisible: false,buttonRect: {},
     };
     },
     showPopover() { this.refs.button.measure((ox, oy, width, height, px, py) => { this.setState({isVisible: true,buttonRect: {x: px,y: py,width: width,height: height}
     });
     });
     },
     closePopover() { this.setState({isVisible: false});
     },
     render() { return (
     <Viewstyle={styles.container}>
     <TouchableHighlightref='button'style={styles.button}onPress={this.showPopover}>
     <Textstyle={styles.buttonText}>Press me</Text>
     </TouchableHighlight>
     <PopoverisVisible={this.state.isVisible}fromRect={this.state.buttonRect}onClose={this.closePopover}>
     <Text>I'm the content of this popover!</Text>
     </Popover>
     </View>
     );
     }
    });varstyles =StyleSheet.create({container: {flex:1,alignItems:'center',justifyContent:'center',backgroundColor:'rgb(43, 186, 180)',
     },button: {borderRadius:4,padding:10,marginLeft:10,marginRight:10,backgroundColor:'#ccc',borderColor:'#333',borderWidth:1,
     },buttonText: {
     }
    });AppRegistry.registerComponent('PopoverExample', () => PopoverExample);

    在其他元素之上显示 popover

    React本机不支持在视图上直接设置z zIndex。 推荐的是重新排列视图层次,最后将popover放在应用程序的root 上。 请参见 /react-native#131

    但是,作为替代,我建议你使用 @brentvatne/react-native-overlay来包装 <Popover/>,不管它位于渲染树的哪一处,都将它带到前面。

    道具

    Prop类型可选的默认描述
    isVisiblebool是的false显示/隐藏 popover
    fromRect矩形不是{}要在其中锚定popover的rectangle
    displayArea矩形是的屏幕矩形允许显示popover的区域
    放置位置字符串是的'auto'如何定位 popover - top | 底部| | 右边| auto。 指定'自动'时,它将确定理想位置,以便popover在 displayArea 中完全可见。
    onClose函数是的当用户点击popover时触发的回调
    customShowHandler函数是的自定义显示动画处理程序- 使用 react-tween-state包装器 API来显示模式。 请参见默认显示处理程序
    customHideHandler函数是的自定义隐藏动画处理程序使用一个 react-tween-state包装器 API来隐藏模式。 请参见默认隐藏处理程序

    rect是具有以下属性的对象: {x: number, y: number, width: number, height: number}

    Credits

    支持动画的代码来自于来自 @brentvatne的。

    麻省理工学院许可证


    COM  react  component  NAT  Native  POP  
    相关文章