反应原生底表 {}

聪明的,微小的,灵活的底板 你的应用渴望

👉🏾 👈🏾

Android & iOS 预览

网络预览

* 安装

npm install @devvie/bottom-sheet
# or
yarn add @devvie/bottom-sheet

为什么这个底盘?

🚀 插入和播放 —— 说 npm install 说完了 零第三方依赖性,没有 Babel 插件,没有 pock 安装. 完全建立在React Industrial自己的API上.

⌨️ 键盘智能 ——工作表自动检测键盘模式(adjustPan 编号 : adjustResize),测量自己在屏幕上的活性位置,当文字输入被聚焦时动画会达到安全高度——都没有任何配置或包装组件.

📦 小脚印 - ~ 4 KB 轻而易举。 极轻又快 几乎不会影响你的体型.

🎯 坐标点 - 确定休养职位,并配有: % 财务报告和审定财务报表 px 数值。 坐标点在内部按上升顺序自动排序,指索引 0 总是代表最小/相撞位置。 床单在释放时会快速到达最接近的点 并暴露出 snapToIndex, (中文(简体) ), expand,以及 collapse 用于全面方案控制.

📟 实时道具更新 ——动态变化 height, (中文(简体) ), snapPoints,或 containerHeight 随时,工作表会重新同步它的布局, 夹住它的活性索引, 并自动点火回调.

🌐 真正的跨平台 ——iOS,Android,Web,和博览会,均出自纯回放原生种. 不需要本地模块 .

🎞 3个动画类型 选择 slide, (中文(简体) ), spring,以及 fade 退出,或提供自定义的放松功能。 动画持续时间对于开放和相近的过渡都是完全可以配置的.

📜 嵌入式滚动 - 与 FlatList, (中文(简体) ), SectionList,以及 ScrollView 在床单内。 拖动手柄来移动工作表; 滚动列表来滚动其内容——没有手势冲突.

🎨 自定义组件 ——用您自己的动画组件来交换拖动手柄或背景. 两者都得到工作表的动画高度值来进行插值,因此可以构建丰富的交互手柄和相接相.

✨ 模式和非模式 · 使用有背景罩的全模式,或使用有高光阴影的轻量级内衬布。 支持工作表上方或后方的自定义背景组件.

✅ 类型脚本第一 ——有编译时间安全的全打入道具. height 财务报告和审定财务报表 snapPoints 在类型层面作为相互排斥的形式加以执行.

基本实例

必须打开和关闭底页。 通过 a ref 到底页并调用 open() 或者说 close() 方法。 。 .

1. 单高(默认)

import React, { useRef } from 'react';
import BottomSheet, { BottomSheetMethods } from '@devvie/bottom-sheet';
import { Button, Text, View } from 'react-native';

const App = () => {
  const sheetRef = useRef<BottomSheetMethods>(null);
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Open Sheet" onPress={() => sheetRef.current?.open()} />
      <BottomSheet ref={sheetRef} height={300}>
        <Text>
          The smart 😎, tiny 📦, and flexible 🎗 bottom sheet your app craves 🚀
        </Text>
      </BottomSheet>
    </View>
  );
};

export default App;

2. 有坐标点(多高)

import React, { useRef } from 'react';
import BottomSheet, { BottomSheetMethods } from '@devvie/bottom-sheet';
import { Button, Text, View } from 'react-native';

const App = () => {
  const sheetRef = useRef<BottomSheetMethods>(null);
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Open Sheet" onPress={() => sheetRef.current?.open()} />
      <BottomSheet
        ref={sheetRef}
        snapPoints={['30%', 450, '90%']}
        index={0}
        onSnap={(index) => console.log('snapped to', index)} // index 0..2, or -1 on close
      >
        <Text>Drag me between snap points 🎯</Text>
      </BottomSheet>
    </View>
  );
};

export default App;

ưμ㼯A

底板组件在内部使用并处理平板手势,以避免卷轴/平板上与其容器的不当行为, 别 放在一个支持平板的容器内,例如 ScrollView你可以把它放在旁边 ScrollView 和使用情况 React Fragment 或一个 View 把它包起来 一切都会好的.

不要这样

<ScrollView>
  <BottomSheet>...</BottomSheet>
</ScrollView>

~ 做到这一点 ~

<>
  <ScrollView>...</ScrollView>

  <BottomSheet>...</BottomSheet>
</>

++ Propals 软件

底板通过道具高度可配置. 所有道具都为两者服务 Android 财务报告和审定财务报表 iOS 除前缀外 android_ 财务报告和审定财务报表 ios_,仅用于 Android 财务报告和审定财务报表 iOS 页:1.

反证方法

床单 ref 揭露下列方法:

sheetRef.current?.open(); // open sheet
sheetRef.current?.close(); // close sheet
sheetRef.current?.snapToIndex(2); // jump to the 3rd (largest) point
sheetRef.current?.expand(); // largest point
sheetRef.current?.collapse(); // smallest point

何时 snapPoints 这些方法不能解决单一的 height所以他们总是安全的打电话.

实例

灵活性是这个底层工作表的重点,这些少数例子显示了底层工作表的某些行为,以及调整道具可以实现什么.

1:QQ 对键盘弹出和方向变化(默认行为)的智能响应

机器人	iOS系统

2+Q 处理深层嵌入列表并滚动视图交互( 默认行为)

机器人	iOS系统

3️⃣ 当自动调整布局 height 财务报告和审定财务报表 containerHeight 道具更改( 默认行为)

4️⃣ 滚动内容时延长工作表高度

5- 用作 SnackBar

6️⃣自定义拖放动画内插

7-% 自定义相间/ 背面

很快会有更多例子出现...

捐款

见 贡献指南 学习如何为储存库和发展工作流程作出贡献.

许可证

麻省理工学院

见 自由主义

支助

</> 与 {} 由 德维 ✌