From b3e4643c521dfd8d640ec77128f3c0da736bdd47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=A1=E5=9D=82=E7=BE=8E=E7=90=B4?= <1161534872@qq.com> Date: Fri, 5 Jan 2024 10:35:45 +0000 Subject: [PATCH 1/2] =?UTF-8?q?[Issues:=20#I8TYPB]=20=E5=A2=9E=E5=8A=A0rea?= =?UTF-8?q?ct-native-action-button=E8=AF=B4=E6=98=8E=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-action-button.md | 130 ++++++++++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 zh-cn/react-native-action-button.md diff --git a/zh-cn/react-native-action-button.md b/zh-cn/react-native-action-button.md new file mode 100644 index 00000000..ea58ab3f --- /dev/null +++ b/zh-cn/react-native-action-button.md @@ -0,0 +1,130 @@ +> 模板版本：v0.1.2 + +

+

react-native-action-button

+

+

+ + License + +

+ +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm i react-native-action-button --save +``` + + +下面的代码展示了这个库的基本使用场景： + +```js +import React, { Component } from 'react'; +import { StyleSheet, View } from 'react-native'; +import ActionButton from 'react-native-action-button'; +import Icon from 'react-native-vector-icons/Ionicons'; + + +class App extends Component { + + render() { + return ( + + {/* Rest of the app comes ABOVE the action button component !*/} + + console.log("notes tapped!")}> + + + {}}> + + + {}}> + + + + + ); + } + +} + +const styles = StyleSheet.create({ + actionButtonIcon: { + fontSize: 20, + height: 22, + color: 'white', + }, +}); + +``` + +## 兼容性 + +在以下版本验证通过 + 1. IDE:4.1.3.313; + SDK:4.1.0.53; + 测试设备：Mate40 pro(NOH-AN00); + Rom: NOH-AN00 204.1.0.52(C00E52R1P17); + RNOH:0.72.11。 + +## 属性 +详情见[react-native-action-button](https://github.com/mastermoo/react-native-action-button) + +### ActionButton: + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ---- | ---- | ---- | -------- | -------- | -------- | +| resetToken|use this to reset the internal component state (expand/collapse) in a re-render cycle. Synchronize the component state. |any| No | / | Yes | +| size |use this to change the size of the Button | number | No | / | Yes | +| active |action buttons visible or not | boolean | No | / | Yes | +| position |one of: left center and right | string | No | / | Yes | +| autoInactive |Auto hide ActionButtons when ActionButton.Item is pressed. | boolean | No | / | Yes | +| hideShadow |use this to hide the default elevation and boxShadow | boolean | No | / | Yes | +| spacing |spacing between the ActionButton.Items | number | No | / | Yes | +| offsetX |offset from the left/right side of the screen | number | No | / | Yes | +| offsetY |offset from the bottom/top of the screen | number | No | / | Yes | +| buttonText |use this to set a different text on the button | string | No | / | Yes | +| degrees |degrees to rotate icon | number | No | / | Yes | +| shadowStyle |The custom shadow style you want to pass in the action button | style | No | / | Yes | +| bgColor |background color when ActionButtons are visible | string | No | / | Yes | +| bgOpacity |set the transparency of the background color| number | No | / | Yes | +| buttonTextStyle |use this to set the textstyle of the button's text | style | No | / | Yes | +| verticalOrientation |direction action buttons should expand. One of: up or down | string | No | / | Yes | +| backgroundTappable |make background tappable in active state of ActionButton | boolean | No | / | Yes | +| activeOpacity |activeOpacity props of TouchableOpacity | number | No | / | Yes | +| renderIcon |Function to render the component for ActionButton Icon. It is passed a boolean, active, which is true if the FAB has been expanded, and false if it is collapsed, allowing you to show a different icon when the ActionButton Items are expanded. | function | No | / | Yes | +| onPress |fires, when ActionButton is tapped| function | No | / | Yes | +| useNativeFeedback |Android: Whether to use a TouchableNativeFeedback| boolean | No | Android | No | +| fixNativeFeedbackRadius |Android: Activate this to fix TouchableNativeFeedback Ripple UI problems| boolean | No | Android | No | +| nativeFeedbackRippleColor |Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback| string | No | Android | No | +### ActionButton.Item: + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ---- | ---- | ---- | -------- | -------- | -------- | +| size |use this to change the size of the Button | number | No | / | Yes | +| buttonColor |background color of the Button | string | No | / | Yes | +| title |the title shown next to the button. When undefined the title is not hidden| string | No | / | Yes | +| textStyle |use this to set the textstyle of the button's item text | style | No | / | Yes | +| shadowStyle |The custom shadow style you want to pass in the action button item | style | No | / | Yes | +| textContainerStyle |use this to set the textstyle of the button's item text container | style | No | / | Yes | +| spaceBetween |use this to set the space between the Button and the text container | number | No | / | Yes | +| hideLabelShadow |use this to hide the button's label default elevation and boxShadow | boolean | No | / | Yes | +| activeOpacity | activeOpacity props of TouchableOpacity | number | No | / | Yes | +| onPress |required function, triggers when a button is tapped| function | No | / | Yes | +| useNativeFeedback |Android: Whether to use a TouchableNativeFeedback| boolean | No | Android | No | +| fixNativeFeedbackRadius |Android: Activate this to fix TouchableNativeFeedback Ripple UI problems| boolean | No | Android | No | +| nativeFeedbackRippleColor |Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback| string | No | Android | No | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [MIT License](https://github.com/mastermoo/react-native-action-button/blob/master/LICENSE) ，请自由地享受和参与开源。 -- Gitee From d91cbdeb32ed9340edbf363f13531e2e176fa015 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=A1=E5=9D=82=E7=BE=8E=E7=90=B4?= <1161534872@qq.com> Date: Fri, 5 Jan 2024 10:41:03 +0000 Subject: [PATCH 2/2] =?UTF-8?q?[Issues:=20#I8TTKD]=20=E4=BF=AE=E6=94=B9=20?= =?UTF-8?q?ROM=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-action-button.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/zh-cn/react-native-action-button.md b/zh-cn/react-native-action-button.md index ea58ab3f..41f0cc50 100644 --- a/zh-cn/react-native-action-button.md +++ b/zh-cn/react-native-action-button.md @@ -70,7 +70,7 @@ const styles = StyleSheet.create({ 1. IDE:4.1.3.313; SDK:4.1.0.53; 测试设备：Mate40 pro(NOH-AN00); - Rom: NOH-AN00 204.1.0.52(C00E52R1P17); + Rom:2.0.0.52(C00E52R1P17log); RNOH:0.72.11。 ## 属性 -- Gitee