RBSheet

RBSheet 是一个类似于 ActionSheet 的 UI 库，但是使用了 React Native 原生的 Modal 组件，而不是弹出原生的 ActionSheet 控件，因此可以更加自定义且易于使用。同时，它的库体积较小，仅仅不到 2KB。

功能特点

• 自定义 UI 样式
• 支持 Modal 动画
• 可拆分成多个 RBSheet，方便管理
• 提供简单易用的 API

安装

你可以使用 npm 或者 yarn 来安装 RBSheet：

npm install rbsheet --save

# OR

yarn add rbsheet

使用

import RBSheet from "rbsheet";

const MyComponent = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button title="Open RBSheet" onPress={() => setVisible(true)} />
      <RBSheet
        visible={visible}
        onClose={() => setVisible(false)}
        animationType="slide"
      >
        <Text>Content</Text>
      </RBSheet>
    </>
  )
}

API

Props

| Props | Type | Required | Default Value | Description | | ------------------| ------ | -------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | animationType | string | N | none | 模态窗口动画类型。可选值有：none, fade, slide。 | | closeOnDragDown | bool | N | false | 是否可以通过向下拖动关闭 RBSheet。 | | closeOnPressMask | bool | N | true | 是否可以通过点击背景层关闭 RBSheet。 | | customStyles | object | N | {} | 自定义样式配置。可以使用下面的 configurations对象中的键设置样式。 | | height | number | N | 260 | RBSheet 的高度。 | | keyboardAvoidingViewEnabled | bool | N | false | 是否开启键盘避免。 | | onClose | func | Y | | RBSheet 关闭时的回调函数。 | | title | string | N | '' | Sheet 的标题。 | | visible | bool | Y | | 控制 RBSheet 的显示状态。 |

实例方法

RBSheet 引用支持以下实例方法：

• open() - 打开 RBSheet。
• close() - 关闭 RBSheet。

Configurations

customStyles 属性可以使用下面的关键字进行自定义样式配置：

{
  wrapper: {},
  container: {},
  draggableIcon: {},
  listItemTitle: {},
  listItemSubtitle: {},
  listItemSelected: {},
  listItem: {},
  titleWrapper: {},
  title: {},
  safeAreaView: {},
}

Example

import React from "react";
import { View, TouchableOpacity, Text } from "react-native";
import RBSheet from "rbsheet";

const App = () => {
  const sheetRef = React.useRef(null);

  return (
    <View style={{ flex: 1 }}>
      <TouchableOpacity onPress={() => sheetRef.current.open()}>
        <Text>Open RBSheet</Text>
      </TouchableOpacity>

      <RBSheet
        ref={sheetRef}
        closeOnDragDown={true}
        closeOnPressMask={false}
        customStyles={{
          wrapper: {
            backgroundColor: "transparent",
          },
          draggableIcon: {
            backgroundColor: "#000",
          },
        }}
      >
        <View>
          <Text>Content</Text>
        </View>
      </RBSheet>
    </View>
  );
}

export default App;

返回：

# RBSheet

RBSheet 是一个类似于 ActionSheet 的 UI 库，但是使用了 React Native 原生的 Modal 组件，而不是弹出原生的 ActionSheet 控件，因此可以更加自定义且易于使用。同时，它的库体积较小，仅仅不到 2KB。

## 功能特点

- 自定义 UI 样式
- 支持 Modal 动画
- 可拆分成多个 `RBSheet`，方便管理
- 提供简单易用的 API

## 安装

你可以使用 npm 或者 yarn 来安装 RBSheet：

```shell
npm install rbsheet --save

# OR

yarn add rbsheet
```

## 使用

```jsx
import RBSheet from "rbsheet";

const MyComponent = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button title="Open RBSheet" onPress={() => setVisible(true)} />
      <RBSheet
        visible={visible}
        onClose={() => setVisible(false)}
        animationType="slide"
      >
        <Text>Content</Text>
      </RBSheet>
    </>
  )
}
```

## API

### Props

| Props              | Type   | Required | Default Value | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| ------------------| ------ | -------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `animationType`    | string | N        | `none`       | 模态窗口动画类型。可选值有：`none`, `fade`, `slide`。                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `closeOnDragDown`  | bool   | N        | `false`      | 是否可以通过向下拖动关闭 RBSheet。                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `closeOnPressMask` | bool   | N        | `true`       | 是否可以通过点击背景层关闭 RBSheet。                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `customStyles`     | object | N        | `{}`         | 自定义样式配置。可以使用下面的 `configurations`对象中的键设置样式。                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `height`           | number | N        | `260`        | RBSheet 的高度。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `keyboardAvoidingViewEnabled` | bool | N | `false` | 是否开启键盘避免。                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `onClose`          | func   | Y        |              | RBSheet 关闭时的回调函数。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `title`            | string | N        | `''`         | Sheet 的标题。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `visible`          | bool   | Y        |              | 控制 RBSheet 的显示状态。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |

### 实例方法

RBSheet 引用支持以下实例方法：

- `open()` - 打开 RBSheet。
- `close()` - 关闭 RBSheet。

### Configurations

`customStyles` 属性可以使用下面的关键字进行自定义样式配置：

```javascript
{
  wrapper: {},
  container: {},
  draggableIcon: {},
  listItemTitle: {},
  listItemSubtitle: {},
  listItemSelected: {},
  listItem: {},
  titleWrapper: {},
  title: {},
  safeAreaView: {},
}
```

### Example

```jsx
import React from "react";
import { View, TouchableOpacity, Text } from "react-native";
import RBSheet from "rbsheet";

const App = () => {
  const sheetRef = React.useRef(null);

  return (
    <View style={{ flex: 1 }}>
      <TouchableOpacity onPress={() => sheetRef.current.open()}>
        <Text>Open RBSheet</Text>
      </TouchableOpacity>

      <RBSheet
        ref={sheetRef}
        closeOnDragDown={true}
        closeOnPressMask={false}
        customStyles={{
          wrapper: {
            backgroundColor: "transparent",
          },
          draggableIcon: {
            backgroundColor: "#000",
          },
        }}
      >
        <View>
          <Text>Content</Text>
        </View>
      </RBSheet>
    </View>
  );
}

export default App;