react native 适配（1）字体

[gaowei1012]

全局适配

// index.js
const TextRender = Text.render
Text.render = function (...args) {
    const originText = TextRender.apply(this, args)
    const { style } = originText.props
    return React.cloneElement(originText, {
        allowFontScaling: Platform.OS === 'ios' ? false : true, // 设置字体随着屏幕分辨率变化拉伸变化
        style: [{
            ...PlatformStyle({fontFamily: 'PingFangRegular'}),
        }, style]
    })
}

[gaowei1012]

// PlatformStyle.js

import { Platform } from 'react-native'

/**
 * 根据平台设置字体样式
 * @param {Object} androidStyle
 * @param {Object} iosStyle 
 */
export function PlatformStyle(androidStyle = {}, iosStyle = {}) {
    if (Platform.OS === 'ios') {
        return iosStyle
    }
    return androidStyle
}

[gaowei1012]

为 android 处理 Text 字体样式问题
封装 Android Text 组件

import React from 'react'
import { Text, Platform, StyleSheet } from 'react-native'


/**
 * 封装对 android Text 组件的支持
 */
export default class TextWidget extends React.Component {

    renderAndroidText() {
        const { style, children } = this.props
        let fontStyle = null

        if (style) {
            if (style instanceof Array) {
                style = StyleSheet.flatten(style)
            }
            fontStyle = style.fontWeight ? {
                fontWeight: 'normal',
                fontFamily: 'PingFangBold',
            } : {
                    fontFamily: 'PingFangRegular'
                }
        }

        return (
            <Text {...this.props}
                style={[style, fontStyle]}
            >
                {children}
            </Text>
        )

    }

    render() {
        return Platform.OS === 'ios' ? <Text {...this.props} /> : this.renderAndroidText()
    }
}

[gaowei1012]

添加字体信息类

// getFontFamily.js

const fonts = {
    SonglcyFont: {
        fontWeights: {
            300: "Light",
            400: "Regular",
            700: "Bold",
            900: "Black",
            normal: "Regular",
            bold: "Bold"
        },
        fontStyles: {
            normal: "",
            italic: "Italic"
        }
    }
}

/**
 * 返回不同的字体
 * @param {*} baseFontFamily 
 * @param {*} styles 
 */
const getFontFamily = (baseFontFamily, styles = {}) => {
    const { fontWeight, fontStyle } = styles
    const font = fonts[baseFontFamily]
    const weight = fontWeight ? font.fontWeights[fontWeight] : font.fontWeights.normal
    const style = fontStyle ? font.fontStyles[fontStyle] : font.fontStyles.normal

    if (style === font.fontStyles.italic && weight === font.fontWeights.normal) {
        return `${baseFontFamily}-${style}`
    }

    return `${baseFontFamily}-${weight}${style}`
}

export default getFontFamily

[beilunyang]

你好，android手机中会有PingFang字体？