RN组件库 - Button 组件

2024-06-23 02:36
文章标签 组件 button rn

本文主要是介绍RN组件库 - Button 组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

从零构建 React Native 组件库，作为一个前端er~谁不想拥有一个自己的组件库呢

1、定义 Button 基本类型 type.ts

import type {StyleProp, TextStyle, ViewProps} from 'react-native';
import type {TouchableOpacityProps} from '../TouchableOpacity/type';
import type Loading from '../Loading';// 五种按钮类型
export type ButtonType =| 'primary'| 'success'| 'warning'| 'danger'| 'default';
// 四种按钮大小
export type ButtonSize = 'large' | 'small' | 'mini' | 'normal';
// 加载中组件类型
type LoadingProps = React.ComponentProps<typeof Loading>;
// 按钮的基本属性
// extends Pick的作用是：
// 继承父类型的属性和方法：通过extends关键字，子类型可以继承父类型的所有属性和方法。
// 选取父类型的特定属性：通过Pick工具类型，从父类型中选取需要的属性，并将其添加到子类型中。
export interface ButtonPropsextends Pick<ViewProps, 'style' | 'testID'>,Pick<TouchableOpacityProps,'onPress' | 'onLongPress' | 'onPressIn' | 'onPressOut'> {/*** 类型，可选值为 primary success warning danger* @default default*/type?: ButtonType;/*** 尺寸，可选值为 large small mini* @default normal*/size?: ButtonSize;/*** 按钮颜色，支持传入 linear-gradient 渐变色*/color?: string;/*** 左侧图标名称或自定义图标组件*/icon?: React.ReactNode;/*** 图标展示位置，可选值为 right* @default left*/iconPosition?: 'left' | 'right';/*** 是否为朴素按钮*/plain?: boolean;/*** 是否为方形按钮*/square?: boolean;/*** 是否为圆形按钮*/round?: boolean;/*** 是否禁用按钮*/disabled?: boolean;/*** 是否显示为加载状态*/loading?: boolean;/*** 加载状态提示文字*/loadingText?: string;/*** 加载图标类型*/loadingType?: LoadingProps['type'];/*** 加载图标大小*/loadingSize?: number;textStyle?: StyleProp<TextStyle>;children?: React.ReactNode;
}

2、动态生成样式对象style.ts

import {StyleSheet} from 'react-native';
import type {ViewStyle, TextStyle} from 'react-native';
import type {ButtonType, ButtonSize} from './type';type Params = {type: ButtonType;size: ButtonSize;plain?: boolean;
};type Styles = {button: ViewStyle;disabled: ViewStyle;plain: ViewStyle;round: ViewStyle;square: ViewStyle;text: TextStyle;
};const createStyle = (theme: DiceUI.Theme,{type, size, plain}: Params,
): Styles => {// Record 是一种高级类型操作，用于创建一个对象类型// 其中键的类型由第一个参数指定（ButtonType），值的类型由第二个参数指定（ViewStyle）const buttonTypeStyleMaps: Record<ButtonType, ViewStyle> = {default: {backgroundColor: theme.button_default_background_color,borderColor: theme.button_default_border_color,borderStyle: 'solid',borderWidth: theme.button_border_width,},danger: {backgroundColor: theme.button_danger_background_color,borderColor: theme.button_danger_border_color,borderStyle: 'solid',borderWidth: theme.button_border_width,},primary: {backgroundColor: theme.button_primary_background_color,borderColor: theme.button_primary_border_color,borderStyle: 'solid',borderWidth: theme.button_border_width,},success: {backgroundColor: theme.button_success_background_color,borderColor: theme.button_success_border_color,borderStyle: 'solid',borderWidth: theme.button_border_width,},warning: {backgroundColor: theme.button_warning_background_color,borderColor: theme.button_warning_border_color,borderStyle: 'solid',borderWidth: theme.button_border_width,},};const buttonSizeStyleMaps: Record<ButtonSize, ViewStyle> = {normal: {},small: {height: theme.button_small_height,},large: {height: theme.button_large_height,width: '100%',},mini: {height: theme.button_mini_height,},};const contentPadding: Record<ButtonSize, ViewStyle> = {normal: {paddingHorizontal: theme.button_normal_padding_horizontal,},small: {paddingHorizontal: theme.button_small_padding_horizontal,},large: {},mini: {paddingHorizontal: theme.button_mini_padding_horizontal,},};const textSizeStyleMaps: Record<ButtonSize, TextStyle> = {normal: {fontSize: theme.button_normal_font_size,},large: {fontSize: theme.button_default_font_size,},mini: {fontSize: theme.button_mini_font_size,},small: {fontSize: theme.button_small_font_size,},};const textTypeStyleMaps: Record<ButtonType, TextStyle> = {default: {color: theme.button_default_color,},danger: {color: plain? theme.button_danger_background_color: theme.button_danger_color,},primary: {color: plain? theme.button_primary_background_color: theme.button_primary_color,},success: {color: plain? theme.button_success_background_color: theme.button_success_color,},warning: {color: plain? theme.button_warning_background_color: theme.button_warning_color,},};return StyleSheet.create<Styles>({button: {alignItems: 'center',borderRadius: theme.button_border_radius,flexDirection: 'row',height: theme.button_default_height,justifyContent: 'center',overflow: 'hidden',position: 'relative',...buttonTypeStyleMaps[type],...buttonSizeStyleMaps[size],...contentPadding[size],},disabled: {opacity: theme.button_disabled_opacity,},plain: {backgroundColor: theme.button_plain_background_color,},round: {borderRadius: theme.button_round_border_radius,},square: {borderRadius: 0,},text: {...textTypeStyleMaps[type],...textSizeStyleMaps[size],},});
};export default createStyle;

3、实现 Button 组件

import React, {FC, memo} from 'react';
import {View, ViewStyle, StyleSheet, Text, TextStyle} from 'react-native';
import TouchableOpacity from '../TouchableOpacity';
import {useThemeFactory} from '../Theme';
import Loading from '../Loading';
import createStyle from './style';
import type {ButtonProps} from './type';const Button: FC<ButtonProps> = memo(props => {const {type = 'default',size = 'normal',loading,loadingText,loadingType,loadingSize,icon,iconPosition = 'left',color,plain,square,round,disabled,textStyle,children,// 对象的解构操作，在末尾使用...会将剩余的属性都收集到 rest 对象中。...rest} = props;// useThemeFactory 调用 createStyle 函数根据入参动态生成一个 StyleSheet.create<Styles> 对象const {styles} = useThemeFactory(createStyle, {type, size, plain});const text = loading ? loadingText : children;// 将属性合并到一个新的样式对象中，并返回这个新的样式对象。const textFlattenStyle = StyleSheet.flatten<TextStyle>([styles.text,!!color && {color: plain ? color : 'white'},textStyle,]);// 渲染图标const renderIcon = () => {const defaultIconSize = textFlattenStyle.fontSize;const iconColor = color ?? (textFlattenStyle.color as string);let marginStyles: ViewStyle;if (!text) {marginStyles = {};} else if (iconPosition === 'left') {marginStyles = {marginRight: 4};} else {marginStyles = {marginLeft: 4};}return (<>{icon && loading !== true && (<View style={marginStyles}>{/* React 提供的一个顶层 API，用于检查某个值是否为 React 元素 */}{React.isValidElement(icon)? React.cloneElement(icon as React.ReactElement<any, string>, {size: defaultIconSize,color: iconColor,}): icon}</View>)}{loading && (<Loading// ?? 可选链操作符，如果 loadingSize 为 null 或 undefined ，就使用 defaultIconSize 作为默认值size={loadingSize ?? defaultIconSize}type={loadingType}color={iconColor}style={marginStyles}/>)}</>);};// 渲染文本const renderText = () => {if (!text) {return null;}return (<Text selectable={false} numberOfLines={1} style={textFlattenStyle}>{text}</Text>);};return (<TouchableOpacity{...rest}disabled={disabled}activeOpacity={0.6}style={[styles.button,props.style,plain && styles.plain,round && styles.round,square && styles.square,disabled && styles.disabled,// !!是一种类型转换的方法，它可以将一个值转换为布尔类型的true或false!!color && {borderColor: color},!!color && !plain && {backgroundColor: color},]}>{iconPosition === 'left' && renderIcon()}{renderText()}{iconPosition === 'right' && renderIcon()}</TouchableOpacity>);
});export default Button;

4、对外导出 Botton 组件及其类型文件

import Button from './Button';export default Button;
export {Button};
export type {ButtonProps, ButtonSize, ButtonType} from './type';

5、主题样式

动态生成样式对象调用函数

import {useMemo} from 'react';
import {createTheming} from '@callstack/react-theme-provider';
import type {StyleSheet} from 'react-native';
import {defaultTheme} from '../styles';
// 创建主题对象：调用 createTheming 函数并传入一个默认主题作为参数
export const {ThemeProvider, withTheme, useTheme} = createTheming<DiceUI.Theme>(defaultTheme as DiceUI.Theme,
);type ThemeFactoryCallBack<T extends StyleSheet.NamedStyles<T>> = {styles: T;theme: DiceUI.Theme;
};export function useThemeFactory<T extends StyleSheet.NamedStyles<T>, P>(fun: (theme: DiceUI.Theme, ...extra: P[]) => T,...params: P[]
): ThemeFactoryCallBack<T> {// 钩子，用于在函数组件中获取当前的主题const theme = useTheme();const styles = useMemo(() => fun(theme, ...params), [fun, theme, params]);return {styles, theme};
}export default {ThemeProvider,withTheme,useTheme,useThemeFactory,
};

6、Demo 演示

在这里插入图片描述

这篇关于RN组件库 - Button 组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1086061。

相关文章

JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
vue2 组件通信

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型，如 String, Number, Boolean,
阅读更多...
kubelet组件的启动流程源码分析

kubelet组件的启动流程源码分析

概述 摘要: 本文将总结kubelet的作用以及原理，在有一定基础认识的前提下，通过阅读kubelet源码，对kubelet组件的启动流程进行分析。 正文 kubelet的作用 这里对kubelet的作用做一个简单总结。 节点管理 节点的注册 节点状态更新 容器管理(pod生命周期管理) 监听apiserver的容器事件 容器的创建、删除(CRI) 容器的网络的创建与删除
阅读更多...
火语言RPA流程组件介绍--浏览网页

火语言RPA流程组件介绍--浏览网页

🚩【组件功能】：浏览器打开指定网址或本地html文件 配置预览 配置说明 网址URL 支持T或# 默认FLOW输入项 输入需要打开的网址URL 超时时间 支持T或# 打开网页超时时间 执行后后等待时间(ms) 支持T或# 当前组件执行完成后继续等待的时间 UserAgent 支持T或# User Agent中文名为用户代理，简称 UA，它是一个特殊字符串头，使得服务器
阅读更多...
Flutter Button使用

Flutter Button使用

Material 组件库中有多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们的父类是于ButtonStyleButton。         基本的按钮特点：         1.按下时都会有“水波文动画”。         2.onPressed属性设置点击回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。
阅读更多...
vue 父组件调用子组件的方法报错，“TypeError: Cannot read property ‘subDialogRef‘ of undefined“

vue 父组件调用子组件的方法报错，“TypeError: Cannot read property ‘subDialogRef‘ of undefined“

vue 父组件调用子组件的方法报错，“TypeError: Cannot read property ‘subDialogRef’ of undefined” 最近用vue做的一个界面，引入了一个子组件，在父组件中调用子组件的方法时，报错提示： [Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘methods
阅读更多...
小程序button控件上下边框的显示和隐藏

小程序button控件上下边框的显示和隐藏

问题 想使用button自带的loading图标功能，但又不需要button显示边框线 button控件有一条淡灰色的边框，在控件上了样式 border:none; 无法让button边框隐藏 代码如下： <button class="btn">.btn{border:none; /*一般使用这个就是可以去掉边框了*/} 解决方案 发现button控件有一个伪元素（::after
阅读更多...
JavaEE应用的组件

JavaEE应用的组件

1、表现层组件：主要负责收集用户输入数据，或者向客户显示系统状态。最常用的表现层技术是JSP，但JSP并不是唯一的表现层技术。 2、控制器组件：对于JavaEE的MVC框架而言，框架提供一个前端核心控制器，而核心控制器负责拦截用户请求，并将用户请求转发给用户实现的控制器组件。而这些用户实现的控制器则负责处理调用业务逻辑方法，处理用户请求。 3、业务逻辑组件：是系统的核心组件，实现系统的业务逻辑
阅读更多...
17 通过ref代替DOM用来获取元素和组件的引用

17 通过ref代替DOM用来获取元素和组件的引用

重点 ref :官网给出的解释是： ref: 用于注册对元素或子组件的引用。引用将在父组件的$refs 对象下注册。如果在普通DOM元素上使用，则引用将是该元素；如果在子组件上使用，则引用将是组件实例： <!-- vm.$refs.p will be the DOM node --><p ref="p">hello</p><!-- vm.$refs.child will be the c
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2