React Native True Sheet 安装与使用指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00353/article/details/142582650

React Native True Sheet 安装与使用指南

react-native-true-sheet The true native bottom sheet experience 💩 项目地址: https://gitcode.com/gh_mirrors/re/react-native-true-sheet

项目概述

React Native True Sheet 是一个专为 React Native 应用设计的纯原生底部弹出表单库，旨在提供快速、轻量级且流畅的用户体验。它支持iOS上的模糊效果，增添了额外的视觉吸引力。

目录结构及介绍

React Native True Sheet 的项目结构清晰，便于开发者理解和集成。下面是其主要目录及文件的功能简介：

src: 包含核心组件和逻辑代码。
- TrueSheet.tsx: 主要的Bottom Sheet组件实现。
example: 提供了示例应用程序的源码，帮助理解组件的使用方法。
docs: 可能包括项目文档或API说明（在本案例中未具体说明）。
.gitignore, .editorconfig, .eslintignore, prettierignore, watchmanconfig, yarn.lock: 版本控制、代码风格管理和工具配置文件。
package.json, yarn.lock: 项目依赖管理文件，记录所需的npm/yarn包及其版本。
LICENSE: 许可证文件，说明软件的使用权限。
README.md: 项目介绍和基本使用的快速指南。

启动文件介绍

虽然没有明确指出特定的“启动文件”，但在实际开发过程中，若想运行示例应用，通常会关注 example 文件夹中的 index.js 或 App.js 文件（依据作者的习惯）。这是一个用于启动React Native应用的入口点，其中会初始化应用并可能导入并展示 TrueSheet 组件进行演示。

配置文件介绍

`package.json`

包含了项目的元数据以及项目的脚本命令、依赖项等信息。对于开发者而言，重要的部分包括：

scripts: 指定了执行各种任务的命令，比如构建、测试等。
dependencies 和 devDependencies: 列出了项目运行所需和开发过程中使用的npm包。

`.gitignore`

定义了Git应该忽略哪些文件或目录，如编译后文件、日志文件等，以保持仓库的干净。

其他配置文件

.editorconfig: 控制代码编辑器的编码风格一致性。
.eslintignore 和 .prettierignore: 分别指定ESLint和Prettier应忽略检查的文件或目录。
yarn.lock: 确保团队成员之间依赖版本的一致性。

安装与基础使用

安装依赖:

yarn add @lodev09/react-native-true-sheet
# 对于iOS，还需进入ios目录安装CocoaPods依赖
cd ios && pod install

基本使用: 在你的React Native组件中引入 TrueSheet 并使用它。

import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import TrueSheet from '@lodev09/react-native-true-sheet';

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

  const presentSheet = async () => {
    await sheetRef.current.present();
    console.log('底部弹窗已显示');
  };

  const dismissSheet = async () => {
    await sheetRef.current.dismiss();
    console.log('底部弹窗已关闭');
  };

  return (
    <View>
      <Button title="打开底部弹窗" onPress={presentSheet} />
      <TrueSheet ref={sheetRef} sizes={['auto', 'large']} cornerRadius={24}>
        <Button title="关闭" onPress={dismissSheet} />
      </TrueSheet>
    </View>
  );
};

export default App;

通过遵循上述步骤，你可以成功地在你的React Native项目中集成并利用React Native True Sheet来创建具有原生体验的底部弹出界面。

react-native-true-sheet The true native bottom sheet experience 💩 项目地址: https://gitcode.com/gh_mirrors/re/react-native-true-sheet