nu-react-native-button

这是 NU 「 no-ui 」 组件库系统 nu-system，按钮组件 React native 实现。

怎么用？

npm i @_nu/react-native-button

二次封装

选择 NuButton 意味着你选择的是一整套按钮解决方案。

因为不同的项目有不同的皮肤，在实际项目中使用需要二次封装。

这里默认采用的是 bootstrap 皮肤。

import React from 'react';
import NuButton, {createNuButtonTheme} from '@_nu/react-native-button';

/**
 * 创建默认按钮主题
 */
createNuButtonTheme({
  levelColors: {
      default: '#343a40',
      secondary: '#6c757d',
      primary: '#007bff',
      warning: '#ffc107',
      danger: '#dc3545',
      success: '#22A745',
  }
});

/**
 * 创建 test 按钮主题
 */
createNuButtonTheme({
    name:'test',
    levelColors: {
        default: '#000000',
        primary: '#1976d2',
        secondary: 'rgb(220, 0, 78)',
        warning: '#ff9900',
        danger: 'red',
        success: 'green',
    }
});

export default NuButton;

使用

import Button from "./components/Button";

const Page=()=>{    
    return (
     <div>
        <Button variant="ghost" size="large">一个大的幽灵按钮</Button>                
        <Button theme="test" variant="ghost" size="large">一个大的幽灵主按钮</Button>
     </div>     
    );
};

Api

NuButton

| props | 类型 | 默认值 | 功能 | |:-----|:-----:|:-----:|:-----:| | theme | 'string' | 'default' | 按钮主题 | | disabled | boolean | - | 不可用按钮 | | loading | boolean | - | loading按钮 | | capsule | boolean | - | 圆角按钮| | circle | boolean | - | 正圆按钮 | | level | 'default', 'primary', 'secondary', 'warning', 'danger', 'success' | default | 按钮等级 | | variant | 'fill', 'ghost', 'link' | fill | 按钮变体 | | size | ['large', 'default', 'middle', 'small' ] or number | default | 按钮大小 | | before | 'element','function' | null | 放到文字之前 | | after | 'element','function' | null | 放到文字之后 |

注: 虽然提供了 size 可以为 number 的接口，但是这个是非常不推荐使用的。你使用这种方式，意味着你定义的这个按钮样式是没法被人复用的。

createNuButtonTheme

| 参数 | 类型 | 默认值 | 功能 | |:-----|:-----:|:-----:|:-----:| | name | string | default | 主题名称 | | defaultProps | Object| 见下面 | 默认属性 | | levelColors | object | 见下面 | 按钮主色列表 | | Wrap | func node | 见下面 | 按钮容器对象 | | WrapAndroid | func node | 见下面 | 安卓按钮容器对象 | | Content | func node | 见下面 | 内容器 | | Txt | func node | 见下面 | 文本容器 | | Loader | func node | 见下面 | 加载对象 | | wrapStyle | object | 见下面 | 主容器样式 | | contentStyle | object | 见下面 | 内容器样式 | | textStyle | object | 见下面 | 文本容器样式 |

defaultProps

defaultProps: {
    level: 'default',
    variant: 'fill'
}

这是默认会添加到按钮上的属性值。

Wrap, Content, Txt, Loader

这四个对象拥有相同的API和使用方法，必须返回一个 node 对象。

{
    WrapAndroid: function ({children, level, variant, ...otherProps}) {
        return <TouchableNativeFeedback
            background={TouchableNativeFeedback.SelectableBackground()} {...otherProps}>{children}</TouchableNativeFeedback>;
    },
    Wrap: function ({children, level, variant, ...otherProps}) {
        return <TouchableOpacity activeOpacity={0.5} {...otherProps}>{children}</TouchableOpacity>;
    },
    Txt: Text,
    Content: View,
    Loader: function ({level, variant, wrapStyle, contentStyle, textStyle}) {
        return (<ActivityIndicator animating={true} color={textStyle.color}/>);
    }
}

• level: 当下按钮的等级
• variant: 当下按钮的变体
• wrapStyle: 计算之后的主容器样式
• contentStyle: 计算之后的内容器样式
• textStyle: 计算之后的文本样式

组件结构

<Wrap>
    <Content>
        <Txt>Button</Txt>
    </Content>
</Wrap>

当 loading 的时候

<Wrap>
    <Content>
        <Loader />
    </Content>
</Wrap>

Api wrapStyle ,contentStyle, textStyle

这三个对象拥有相同的API和使用方法。

{
    wrapStyle: {
        default: {
            position: 'relative',
            overflow: 'hidden',
            height: 40,
        },
        capsule: {
            borderRadius: 100
        },
        circle: {
            borderRadius: 100
        },
        large: {
            height: 48
        },
        middle: {
            height: 32
        },
        small: {
            height: 24
        },
        ghost: {
            borderWidth: 1
        },
        disabled: {
            opacity: 0.4
        }
    },
    textStyle: {
        default: {
            color: "#ffffff",
            fontSize: 16,
            textAlign: 'center',
            marginLeft: 8,
            marginRight: 8
        },
        large: {
            fontSize: 18
        },
        middle: {
            fontSize: 14
        },
        small: {
            fontSize: 12
        },
        customStyle: function ({warning, fill, style}) {
            if (warning && fill) {
                style.color = '#333333';
            }
            return style;
        }
    },
    contentStyle: {
        default: {
            width: '100%',
            height: '100%',
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: 'row'
        }
    }
}

除了 default 之外的所有 bool 属性，都会在实际渲染的时候和 default 样式合并然后经过 customStyle 再渲染。

customStyle

必须要返回 style 对象。

• level: 当下按钮的等级
• variant: 当下按钮的变体
• style: 当下计算好的样式

你甚至可以自定义任何 bool 属性。

{
    wrapStyle:{
        h100:{
            height: 100
        }
    }
}

<Button h100>高100的按钮</Button>

levelColors

const levelColors= {
    default: '#343a40',
    primary: '#007bff',
    secondary: '#6c757d',
    warning: '#ffc107',
    danger: '#dc3545',
    success: '#22A745',
};

FAQ

添加图标

<Button before={<ActivityIndicator animating={true} color={'red'}/>}>图标在我左边</Button>
<Button after={<ActivityIndicator animating={true} color={'red'}/>}>图标在我右边</Button>

多行文本

<Button>{({textStyle}) => {
    return (
        <View>
            <Text style={textStyle}>切换主题</Text>
            <Text style={textStyle}>「default</Text>
        </View>
    );
}}</Button>

渐变背景

{    
    name:'test',
    Content: function ({children, style, level, variant}) {
        /* 修改 fill danger 按钮为渐变背景  */
        if (level === 'danger' && variant === 'fill') {
            return (
                <LinearGradient
                    colors={["red", "blue"]}
                    style={style}
                >{children}</LinearGradient>
            );
        } else {
            return (
                <View style={style}>{children}</View>
            );
        }
    },
}