Skip to content

Latest commit

 

History

History
151 lines (124 loc) · 13.2 KB

react-native-action-button.md

File metadata and controls

151 lines (124 loc) · 13.2 KB

模板版本：v0.2.2

react-native-action-button

Supported platforms License

[!TIP] Github 地址

安装与使用

进入到工程目录并输入以下命令：

npm

npm install [email protected]

yarn

yarn add [email protected]

下面的代码展示了这个库的基本使用场景：

import React, { Component } from "react";
import { StyleSheet, View,Text } from "react-native";
import ActionButton from "react-native-action-button";

export class App extends Component {
  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "#f3f3f3" }}>
        <ActionButton buttonColor="rgba(231,76,60,1)">
          <ActionButton.Item
            buttonColor="#9b59b6"
            title="New Task"
            onPress={() => console.log("notes tapped!")}
          >
            <Text>1</Text>
          </ActionButton.Item>
          <ActionButton.Item
            buttonColor="#3498db"
            title="Notifications"
            onPress={() => {}}
          >
             <Text>2</Text>
          </ActionButton.Item>
          <ActionButton.Item
            buttonColor="#1abc9c"
            title="All Tasks"
            onPress={() => {}}
          >
             <Text>3</Text>
          </ActionButton.Item>
        </ActionButton>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: "#000",
  },
});

约束与限制

兼容性

在以下版本验证通过

  1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52;
  2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58;
  3. RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE：DevEco Studio 5.0.3.400; ROM：3.0.0.25;
  4. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;

属性

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

Name Description Type Required Platform HarmonyOS Support
resetToken use this to reset the internal component state (expand/collapse) in a re-render cycle. Synchronize the component state. any No All Yes
size use this to change the size of the Button number No All Yes
active action buttons visible or not boolean No All Yes
position one of: left center and right string No All Yes
autoInactive Auto hide ActionButtons when ActionButton.Item is pressed. boolean No All Yes
hideShadow use this to hide the default elevation and boxShadow boolean No All Yes
spacing spacing between the ActionButton.Items number No All Yes
offsetX offset from the left/right side of the screen number No All Yes
offsetY offset from the bottom/top of the screen number No All Yes
buttonText use this to set a different text on the button string No All Yes
degrees degrees to rotate icon number No All Yes
shadowStyle The custom shadow style you want to pass in the action button style No All Yes
bgColor background color when ActionButtons are visible string No All Yes
bgOpacity set the transparency of the background color number No All Yes
buttonTextStyle use this to set the textstyle of the button's text style No All Yes
verticalOrientation direction action buttons should expand. One of: up or down string No All Yes
backgroundTappable make background tappable in active state of ActionButton boolean No All Yes
activeOpacity activeOpacity props of TouchableOpacity number No All 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 All Yes
onPress fires, when ActionButton is tapped function No All 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:

Name Description Type Required Platform HarmonyOS Support
size use this to change the size of the Button number No All Yes
buttonColor background color of the Button string No All Yes
title the title shown next to the button. When undefined the title is not hidden string No All Yes
textStyle use this to set the textstyle of the button's item text style No All Yes
shadowStyle The custom shadow style you want to pass in the action button item style No All Yes
textContainerStyle use this to set the textstyle of the button's item text container style No All Yes
spaceBetween use this to set the space between the Button and the text container number No All Yes
hideLabelShadow use this to hide the button's label default elevation and boxShadow boolean No All Yes
activeOpacity activeOpacity props of TouchableOpacity number No All Yes
onPress required function, triggers when a button is tapped function No All 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 ，请自由地享受和参与开源。