react-native-normalization-text v0.1.3

react-native-normalization-text

react-native 字体大小、样式规范化管理，自适应缩放组件。

功能介绍

字体缩放

根据不同设备屏幕尺寸调整字体大小，可自定义缩放规则。

未适配：

适配：

字体管理

一次配置（或者使用默认配置），不在app中到处书写字体样式，也促进UI设计输出规范的字体。

安装

npm install react-native-normaliztion-text --save

或者使用yarn

yarn add react-native-normaliztion-text 

使用

import {Text, H1, H2} from 'react-native-normalization-text';  
...

// jsx
<Text>不带自定义样式的Text<Text>
<H1>带h1预设样式、props的Text<H1>

// 接受RN中Text的属性和配置中映射的size、color属性
<H2 size="large" color="danger" style={{...}}>带h2预设样式、props的Text<H2>

Text除了rn提供的属性，新添以下属性:

更多配置

默认配置：

默认sizes规范：

默认colors规范：

默认可用字体：

• H1
• H2
• H3
• H4
• PrimaryText
• SmallText

• TinyText

自定义配置：

1. 在项目根目录执行初始化脚本，或者在根目录手动新建新建 text.config.js
2. 根据自身需求配置需要调整的配置项，可以只修改你需要修改的配置项，其余的默认配置项仍会起作用。
3. 在项目根目录下执行 更新脚本让自定义配置生效，或者使用重置脚本恢复默认配置。

脚本

可以将脚本添加至package.json的script字段中，方便调用。

样式优先级：

jsx中style样式 > jsx中color、size属性映射样式 > config.categories.h1.style

属性配置优先级(scalableItems)：

jsx中scalableItems > config.categories.h1.props.scalableItems > config.scalableItems

配置文件引用依赖：

配置文件支持引用项目中的依赖，支持 require('..') 和 import res from '..'两种形式，比如在需要引用项目中的样式：

// text.config.js
import colors from '../../Theme/colors';
import scale from '../../Theme/fontScale';

module.exports = {
    scale
    colors: {
        primary: colors.primary,
        success: colors.success,
        error: colors.error
    }
};

颜色支持：

同React Native支持的颜色格式