From 61ab76c1597683dd12ed7d4def42f080c72fe9f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=80=B8=E5=85=88=E7=94=9F?= Date: Mon, 6 May 2024 14:48:17 +0800 Subject: [PATCH] =?UTF-8?q?[Issues:=20#I9KNS9]=20=E6=B7=BB=E5=8A=A0react-n?= =?UTF-8?q?ative-material-buttons=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-material-buttons.md | 252 +++++++++++++++++++++++++ 1 file changed, 252 insertions(+) create mode 100644 zh-cn/react-native-material-buttons.md diff --git a/zh-cn/react-native-material-buttons.md b/zh-cn/react-native-material-buttons.md new file mode 100644 index 00000000..81ca2005 --- /dev/null +++ b/zh-cn/react-native-material-buttons.md @@ -0,0 +1,252 @@ +> 模板版本：v0.2.0 + +

+

react-native-material-buttons

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-material-buttons/tree/sig) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[<@react-native-oh-tpl/react-native-material-buttons> Releases](https://github.com/react-native-oh-library/react-native-material-buttons/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-material-buttons@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-material-buttons@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +```tsx +import React, { Component } from 'react'; +import { AppRegistry, Text, ScrollView, View, SafeAreaView } from 'react-native'; +import { TextButton, RaisedTextButton } from 'react-native-material-buttons'; + +interface Styles { + scroll: object; + container: object; + safeContainer: object; + column: object; + row: object; + card: object; + button: object; + display: object; + text: object; + content: object; + bold: object; +} + +let styles: Styles = { + scroll: { + padding: 4, + paddingTop: 24, + backgroundColor: '#E8EAF6', + }, + container: { + flexDirection: 'row', + justifyContent: 'space-around', + marginBottom: 8, + backgroundColor: 'rgba(0,0,0,.05)', + }, + safeContainer: { + flex: 1, + backgroundColor: '#E8EAF6', + }, + column: { + justifyContent: 'center', + marginBottom: 8, + backgroundColor: 'rgba(0,0,0,.05)', + }, + row: { + marginBottom: 8, + }, + card: { + borderRadius: 2, + padding: 8, + margin: 4, + backgroundColor: 'rgba(255, 255, 255, 1)', + minHeight: 76, + justifyContent: 'space-between', + shadowOpacity: 0.54, + shadowRadius: 1, + shadowOffset: { width: 0, height: 1 }, + elevation: 1, + }, + button: { + margin: 4, + }, + display: { + paddingHorizontal: 8, + fontSize: 17, + fontWeight: '500', + color: 'rgba(0, 0, 0, .87)', + }, + text: { + padding: 8, + fontSize: 15, + color: 'rgba(0, 0, 0, .54)', + }, + content: { + flex: 1, + paddingVertical: 16, + }, + bold: { + fontWeight: 'bold', + }, +}; + +/* eslint-disable react/prop-types */ +let Strong: React.FC<{ children: React.ReactNode }> = ({ children, ...props }) => ( + + {children} + +); +/* eslint-enable */ + +export function MaterialButtons() { + return ( + + + + + default + + Buttons with default props, raised or flat, enabled or disabled + + + + + + + + + + + raised + + Buttons with custom color, titleColor, increased{' '} + rippleDuration and rippleOpacity + + + + + + + + + + + + flat + Buttons with custom titleColor and color + + + + + + + + + ); +} + + +``` + +## 约束与限制 + +#### 兼容性 + +在下述版本验证通过： + +RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; + +## 属性 + +### 此组件有以下属性: +## **API（TextButton ）** + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:-----------------------:| :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | +| **titleStyle** | Style object for the button's title | Object | No | iOS/Android | Yes | +| **title** | Button title | String | YES | iOS/Android | Yes | +| **titleColor** | Button title color | String | No | iOS/Android | Yes | +| **disabledTitleColor** | Button title color for disabled state | String | No | iOS/Android | Yes | + +## **API（RaisedTextButton）** + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:-----------------------:| :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | +| **rippleOpacity** | Opacity of the ripple effect | Number | No | iOS/Android | Yes | +| **rippleDuration** | Duration of the ripple effect in milliseconds | Number | No | iOS/Android | Yes | + +## **API（Common）** + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:-----------------------:| :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | +| **color** | Button color | String | No | iOS/Android | Yes | +| **disabledColor** | Button color for disabled state | String | No | iOS/Android | Yes | +| **shadeColor** | Button shade color for focused state | String | No | iOS/Android | Yes | +| **shadeOpacity** | Button shade opacity for focused state | Number | No | iOS/Android | Yes | +| **shadeBorderRadius** | Button shade border radius | Number | No | iOS/Android | Yes | +| **focusAnimation** | Focus animation state | Animated.Value | No | iOS/Android | Yes | +| **disableAnimation** | Disable animation state | Animated.Value | No | iOS/Android | Yes | +| **focusAnimationDuration** | Focus animation duration in ms | Number | No | iOS/Android | Yes | +| **disableAnimationDuration** | Disable animation duration in ms | Number | No | iOS/Android | Yes | +| **disabled** | Button availability | Boolean | No | iOS/Android | Yes | +| **onPress** | Touch up callback | Function | No | iOS/Android | Yes | +| **payload** | Payload object for onPress callback | Any | No | iOS/Android | Yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [MIT License](https://github.com/react-native-oh-library/react-native-material-buttons/blob/sig/license.txt) ，请自由地享受和参与开源。 \ No newline at end of file -- Gitee