From 66cfabaed92da4316083239acfbc970e05fdd56f Mon Sep 17 00:00:00 2001 From: yinjiarui Date: Mon, 12 Aug 2024 20:31:13 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[#IAJIVA]=20=E6=96=B0=E5=A2=9E=20react-?= =?UTF-8?q?native-bounceable=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-bounceable.md | 123 +++++++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 zh-cn/react-native-bounceable.md diff --git a/zh-cn/react-native-bounceable.md b/zh-cn/react-native-bounceable.md new file mode 100644 index 00000000..8d687ef5 --- /dev/null +++ b/zh-cn/react-native-bounceable.md @@ -0,0 +1,123 @@ +> 模板版本：v0.2.2 + + + +# `react-native-bounceable` + +[![Supported platforms](https://img.shields.io/badge/platforms-android%20%7C%20ios%20%7C%20harmony%20-lightgrey.svg) ](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fwix%2Freact-native-calendars)[![License](https://img.shields.io/badge/license-MIT-green.svg)](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fwix%2Freact-native-calendars%2Fblob%2Fmaster%2FLICENSE) + +> [!TIP] [Github 地址]([WrathChaos/react-native-bounceable: 🚀 Animate and bounce any component with RNBounceable for React Native (github.com)](https://github.com/WrathChaos/react-native-bounceable)) + +## 安装与使用 + +进入到工程目录并输入以下命令： + +### ** npm** + +```bash +npm i @freakycoder/react-native-bounceable +``` + + + +下面的代码展示了这个库的基本使用场景： + +1、引入库文件 + +```jsx +import RNBounceable from "@freakycoder/react-native-bounceable"; +``` + +2、使用场景： + +您可以将**任何子组件**放入 **RNBounceable** 组件中，当它被按下时，它会使其反弹 + +```jsx + {}}> + + Bounce + + +``` + +详细使用场景 + +```javascript +import React from 'react'; +import type { PropsWithChildren } from 'react'; +import { StyleSheet, View, Text }from 'react-native'; +import RNBounceable from "@freakycoder/react-native-bounceable"; + +let flag:boolean = true; +export function BounceableExample () { + const customStyle = { + backgroundColor: 'red', + padding: 10, + borderRadius: 100, + alignItems: 'center', + justifyContent: 'center', + }; + + + Press Me + +} + +const styles = StyleSheet.create({ + container: { + width: '100%', + height: '100%', + }, + bounceStyle: { + backgroundColor: 'lightblue' + }, + textStyle: { + fontSize: 20, + color: 'red', + }, + }); +``` + + + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证： + +1. RNOH: 0.72.28; SDK：HarmonyOS NEXT Developer Beta2; IDE：DevEco Studio 5.0.3.500; ROM：5.0.0.31; + +## 属性和方法 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Property | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | -------------------------------------------- | :-------------: | :------: | ----------- | ----------------- | +| bounceEffectIn | 按下时缩小到原始大小的xx（如：0.1） | number | yes | iOS/Android | yes | +| bounceEffectOut | 松开时稍微放大到原始大小的xx（如：1.5） | number | yes | iOS/Android | yes | +| bounceVelocityIn | 按下时的速度 | number | yes | iOS/Android | yes | +| bounceVelocityOut | 松开时的速度 | number | yes | iOS/Android | yes | +| bouncinessIn | 按下时的弹性系数（设置值0-50有明显效果显示） | number | yes | iOS/Android | yes | +| bouncinessOut | 松开时的弹性系数（设置值0-50有明显效果显示） | number | yes | iOS/Android | yes | +| onPress | 为 onPress 功能设置您自己的逻辑 | void | yes | iOS/Android | yes | +| style | 像设置任何其他 View 容器一样设置样式 | CustomStyleProp | yes | iOS/Android | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2FTehShrike%2Fdeepmerge%2Fblob%2Fmaster%2Flicense.txt) ，请自由地享受和参与开源。 -- Gitee