@ appandflow/ react-navigation- bottom- singet (中文(简体) )
反应导航的底板导航.
也可以与 Expo 路由器合作 实例
整合 @ gorhom/ 下表 与 反应导航。 。 。 .
安装
yarn add @appandflow/react-navigation-bottom-sheet @react-navigation/native @gorhom/bottom-sheet
如果你还没有这些,你还需要安装 @ gorhom/ 下表依赖性 反应-内生再活化和反应-内生-地相-手相.
使用量
import { createBottomSheetNavigator } from '@appandflow/react-navigation-bottom-sheet';
// ...
const BottomSheet = createBottomSheetNavigator();
<BottomSheet.Navigator
// Default options
screenOptions={{ snapPoints: ['60%', '90%'] }}
>
{/* The first screen should be your app content */}
<BottomSheet.Screen name="app" component={MyApp} />
<BottomSheet.Screen name="firstSheet" component={FirstSheetComponent} />
<BottomSheet.Screen
name="secondSheet"
component={SecondSheetComponent}
// Can pass any prop from @gorhom/bottom-sheet's BottomSheetModal
options={{ snapPoints: [200, '100%'], index: 1 }}
/>
</BottomSheet.Navigator>;
// ...
// Open like any regular react-navigation screen.
navigation.navigate('firstSheet', { id: 1 });
见反应导航 示例应用程序 或 博览会路由器示例 example/expo-router/app 完全使用细节.
运行实例
yarn example:react-navigation- 发射经典回放导航样本yarn example:expo-router- 启动世博会路由器样本
API 密码
导航选项
snapPoints
Array<string | number>;
底层工作表的接点,应该从下到上排序。 它接受数和字符串的数组.
默认为 ['66%']。 。 。 .
其他选择
多数道具来自 BottomSheetModal 被曝光为导航选项。 见 @gorhom/下表网站 用于完整文档.
导航助手
导航辅助工具可用于 navigation 对象.
snapTo
(index: number) => void
将当前工作表对齐到 index。 。 。 .
捐款
见 贡献指南 学习如何为储存库和发展工作流程作出贡献.
许可证
麻省理工学院