@ delacour/ react- native-下表

用于 React Natural 的无头底工作表引擎 — Gusture Handler for the 锅,为运动而重新激活,为键盘控制器, 传送传送门.

没有标志,没有 className,没有主题。 每个半径、颜色和内置都是 style 你通过。 如果你想要一张已经穿戴设计系统的工作表,请使用 @delacour/react-native-ui/bottom-sheet, (中文(简体) ), 是这个引擎 上面有符号.

联合国 ui.delacour.co.nz/docs/下表。 。 。 .

阿尔法. 这个包裹, @delacour/react-native-ui 财务报告和审定财务报表 @delacour/react-native-charts 发布到 npm alpha 标记,每个字母 也为 latest。 。 。 .

安装

bun add @delacour/react-native-bottom-sheet@alpha
bunx expo install react-native-gesture-handler react-native-reanimated react-native-worklets react-native-keyboard-controller react-native-safe-area-context react-native-teleport

本地的同龄人会经历的 expo install,所以SDK 选择可以 建造; react 财务报告和审定财务报表 react-native 已经在任何应用程序中.

只有Fabric,只有dev客户端. react-native-teleport 移动本地视图 在主机之间, 需要新的架构—— 自 React 以来的默认 原生地为0.76,也是世博会SDK53及后期唯一的建筑. 这是本地人 模块,所以它不会在 Expo Go 中运行: 构建 dev 客户端 (单位:千美元)npx expo run:ios,或者EAS开发建筑),并在之后重建 安装.

软件包本身没有运行时间依赖.

供应商

您的应用程序上载了4个,按照这个顺序。 该套装只使最后一个——a 有巢的手势根是枯重的 有巢的 KeyboardProvider 是一个 第二键盘与第一键不一致.

import { BottomSheetProvider } from "@delacour/react-native-bottom-sheet";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { KeyboardProvider } from "react-native-keyboard-controller";
import { initialWindowMetrics, SafeAreaProvider } from "react-native-safe-area-context";

<GestureHandlerRootView style={{ flex: 1 }}>
  <SafeAreaProvider initialMetrics={initialWindowMetrics}>
    <KeyboardProvider>
      <BottomSheetProvider>{children}</BottomSheetProvider>
    </KeyboardProvider>
  </SafeAreaProvider>
</GestureHandlerRootView>;

BottomSheetProvider 是根主机, 每张工作表都会传送到, 所以是一个工作表 画出航海家的作品 没有它 Portal 将它编成一个内置的工作表.

解剖学

import { BottomSheet } from "@delacour/react-native-bottom-sheet";

<BottomSheet snapPoints={["40%", "90%"]}>
  <BottomSheet.Trigger>
    <Text>Open</Text>
  </BottomSheet.Trigger>
  <BottomSheet.Portal>
    <BottomSheet.Overlay style={{ backgroundColor: "rgba(0,0,0,0.4)" }} />
    <BottomSheet.Container>
      <BottomSheet.Background style={{ backgroundColor: "#fff", borderTopLeftRadius: 16, borderTopRightRadius: 16 }} />
      <BottomSheet.Handle style={{ alignItems: "center", paddingVertical: 12 }}>
        <View style={{ width: 36, height: 5, borderRadius: 3, backgroundColor: "#ccc" }} />
      </BottomSheet.Handle>
      <BottomSheet.Content style={{ padding: 16 }}>
        <BottomSheet.Title>Filters</BottomSheet.Title>
        <BottomSheet.Description>Narrow the list down.</BottomSheet.Description>
        <BottomSheet.TextInput placeholder="Search" />
        <BottomSheet.Close>
          <Text>Close</Text>
        </BottomSheet.Close>
      </BottomSheet.Content>
      <BottomSheet.Footer padding={16}>
        <Button title="Apply" onPress={apply} />
      </BottomSheet.Footer>
    </BottomSheet.Container>
  </BottomSheet.Portal>
</BottomSheet>;

Container 是移动的面板; Content 里面是静态的身体. 把尸体换掉 BottomSheet.ScrollView, (中文(简体) ), FlatList 或者说 SectionList 财务报告和审定财务报表 列表的内容大小成为工作表本身的坐标点; 转换为 BottomSheet.Steps 控制器从 useSheetMachine 和床单 高度滑翔在打字机的台阶之间. Footer 被粘着 默认,站在安全区域带上并骑着键盘的边缘. <BottomSheet.Portal inline> 落实; <BottomSheet.Host name> * 向土著模式提供自己的目标; detached 将工作表显示为 纸牌.

尺寸和行为—— snapPoints, (中文(简体) ), dynamicSizing, (中文(简体) ), maxDynamicContentSize, (中文(简体) ), keyboardBehavior, (中文(简体) ), detached可能的工作道具是根的. 每个角色都参与 style 财务报告和审定财务报表 ref,以及提供文本或媒体的部分 带 asChild 把他们的行为交给你的一部分.

数学本身

@delacour/react-native-bottom-sheet/core 每一个坐标点、键盘、页脚 和包中的几何计算,加上可导入的步机 模块图中没有本地模块 :

import { defineSheetMachine, positionFor, UNMEASURED } from "@delacour/react-native-bottom-sheet/core";

许可证

麻省理工学院