简介
react-native-simple-popover 是一个 React Native 的弹出框组件。它可以用来展示信息、操作提示等。本文将详细介绍如何使用 react-native-simple-popover。
安装
通过 npm 安装：
npm install react-native-simple-popover --save
快速开始
导入组件：
import Popover from 'react-native-simple-popover';
在 render 函数中渲染组件：
-- -------------------- ---- ------- -------- - ------ - ----- ------------------------- ------------------- ----------------------------- ---------- -------------- --------------------- -------- -------------------------------- -------------------------- ---------------------------- ----- -------- ----------- -------- --- -------------------------- ------- ---------- ------- -- -
展开代码其中，
fromView指定了 Popover 弹出位置的参照组件，isVisible用于控制 Popover 的显示状态，onClose是 Popover 关闭时的回调函数。实现
fromView和closePopover函数：fromView = () => { return this.refs.button; }; closePopover = () => { this.setState({ isVisible: false }); };
添加样式：
-- -------------------- ---- ------- ----- ------ - ------------------- ---------- - ----- -- ----------- --------- --------------- --------- -- ------- - ---------------- ------- -------- --- -- ---
展开代码
至此，我们就使用 react-native-simple-popover 实现了一个简单的弹出框。
属性
| 属性 | 类型 | 描述 |
|---|---|---|
isVisible |
bool |
Popover 是否可见 |
fromView |
View |
Popover 弹出位置的参照组件 |
onClose |
() => void |
关闭 Popover 时的回调函数 |
containerStyle |
ViewStyle |
Popover 的容器组件的样式 |
arrowStyle |
ViewStyle |
Popover 箭头组件的样式 |
popoverStyle |
ViewStyle |
Popover 内容组件的样式 |
verticalOffset |
number |
Popover 纵向偏移量 |
horizontalOffset |
number |
Popover 横向偏移量 |
placement |
['top', 'bottom', 'left', 'right'] | Popover 的出现位置 |
深入学习
操作触发
Popover 的触发方式主要分为两种：点击和长按。
如果想要让 Popover 点击时出现，可以在 Touchable 组件的 onPress 属性中控制 isVisible，并返回需要作为 fromView 的组件。
-- -------------------- ---- ------- ------------------ - ------- ------ -- - --------------- ---------- ----- ----------- ------------------------- --- -- -------- -------------------------------- ----------- -- --------------- ---------- ----- --- - ------ -- ------- ------- ---------- ----------------- ---------------------------------- ----- --------------------- ---------------------- -------------------展开代码
另外，react-native-simple-popover 还支持长按触发。我们可以使用 TouchableWithoutFeedback，在 onLongPress 时显示 Popover，通过 onHideAfterLongPress 关闭 Popover。
-- -------------------- ---- ------- ---------------------------- ------ - --------------- ---------- ----- ----------- - -- ------------------------ -- ------------------------ ------ ----------------------- ------- ------------------------ -- --- - ---------------------- - --------------- ---------- ------ ----------- ---------- --- - ------ ------------------------- --------------------------------------------------- ---------------- ----------------------------------------------- ------ ----- --------------------- -------------------- ------- --------------------------- -------展开代码
自定义样式
popoverStyle 是 Popover 的内容组件样式，可以通过对它的修改来改变 Popover 的样式。将它设置为一个样式对象以指定更多自定义样式:
-- -------------------- ---- ------- -------- -------------------------------- ----------- -- --------------- ---------- ----- --- ------------------------------ ----- ----------------------- ----- -------------------------------- ------- ---------- ----- ------ - ------------------- -------- - ---------------- ------- ------------- -- -- -------- - ------------------ --- ---------------- -- -- ----- - --------- --- -- ---展开代码
最终效果如下图所示：
使用箭头
arrowStyle 是 Popover 箭头组件样式，开启箭头请设置 withArrow={true}：
-- -------------------- ---- ------- -------- -------------------------------- ----------- -- --------------- ---------- ----- --- ---------------- ------------------- --------------- ---------------- -------------------------- ----- ----------------------- ----- ---------------------- ------- --------- ------- ---------- ----- ------ - ------------------- ------ - ---------------- ------ -- -------- - ------------------ --- ---------------- -- -- ----- - --------- --- -- ---展开代码
效果如下：
总结
本文介绍了如何使用 npm 包 react-native-simple-popover，包括安装、快速开始、属性、深入学习等内容。通过本文的学习，我们可以掌握如何自定义 Popover 样式、使用箭头、以及触发方式等相关知识，为未来使用 react-native-simple-popover 打下坚实的基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cda81e8991b448e6874
