react-native-popup-ui 技术文档

react-native-popup-ui 技术文档

安装指南

使用 Yarn 安装

yarn add popup-ui

使用 npm 安装

npm i popup-ui

项目使用说明

react-native-popup-ui 是一个简单且高度可定制的 React Native 组件，用于实现弹出式 UI。它提供了多种功能，如自动关闭、回调函数、背景颜色自定义等。

基本使用

首先，在你的项目中导入 Root 和 Popup 组件：

import { View, TouchableOpacity, Text } from 'react-native'
import { Root, Popup } from 'popup-ui'

然后，在你的组件中使用 Popup.show 方法来显示弹出窗口：

<Root>
    <View>
        <TouchableOpacity
            onPress={() =>
              Popup.show({
                type: 'Success',
                title: 'Upload complete',
                button: false,
                textBody: 'Congrats! Your upload successfully done',
                buttonText: 'Ok',
                callback: () => Popup.hide()
              })
            }
        >
            <Text>Open Popup</Text>
        </TouchableOpacity>
    </View>
</Root>

Toast 组件使用

你也可以使用 Toast 组件来显示提示信息：

// 需要导入 Toast 组件
<Root>
    <View>
        <TouchableOpacity
            onPress={() => 
                Toast.show({
                    title: 'User created',
                    text: 'Your user was successfully created, use the app now.',
                    color: '#2ecc71'
                })
            }
        >
            <Text>Call Toast</Text>
        </TouchableOpacity>
    </View>
</Root>

项目 API 使用文档

Popup 组件

| 名称 | 描述 | 默认值 | 类型 | | ---------- | ---------------------------------------- | ------------------ | ----------- | | title | 设置弹出窗口的主标题 | Upload complete | String | | type | 定义弹出窗口的类型（成功、警告或错误） | Success | String | | textBody | 定义弹出窗口的文本内容 | | String | | button | 是否显示按钮 | true | Bool | | buttonText | 定义按钮的文本 | Ok | String | | callback | 定义按钮的回调函数 | Alert() | Func | | background | 设置背景颜色 | rgba(0, 0, 0, 0.5) | String | | timing | 设置弹出窗口自动关闭的时间 | 5000 | Number | | autoclose | 设置弹出窗口是否自动关闭 | false | Bool | | icon | 使用自定义图标 | false | Component |

Toast 组件

| 名称 | 描述 | 默认值 | 类型 | | ---------- | ---------------------------------------- | ------------------ | --------- | | title | 设置 Toast 的主标题 | | String | | text | 定义 Toast 的文本内容 | | String | | color | 定义标题、边框和图标的颜色 | #e1e1e1 | String | | timing | 定义 Toast 自动关闭的时间 | 6s | Int | | icon | 选择适合的图标 | | Component |

项目安装方式

使用 Yarn 安装

yarn add popup-ui

使用 npm 安装

npm i popup-ui

通过以上步骤，你可以轻松地将 react-native-popup-ui 集成到你的 React Native 项目中，并根据需要进行定制和使用。