React Native文本在荣耀及部分三星设备渲染时被截断求助

问题场景 #

应用在多数设备上文本渲染正常，但荣耀及部分三星设备中目标文本Concluir segmento出现截断现象，无法完整显示。

当前实现代码 #

多语言配置文件（Src/localization/global_es.json） #

{"closeSegment": "Concluir segmento"}

组件调用 #

<BtnGradient
    onPress={() => handleSubmit()}
    colorText={'black'}
    title={t('segmentScreen.closeSegment')}
/>

BtnGradient组件代码 #

const BtnGradient = ({
    onPress,
    colorText,
    title,
    disabled,
    widthValue = 0.95,
}: BtnProps) => {
    const auth = useSelector((state: RootState) => state.auth);
    return (
        <TouchableOpacity
            disabled={disabled}
            onPress={onPress}
            activeOpacity={0.7}
            style={{alignSelf: 'center'}}>
            <Container widthValue={widthValue}>
                <LinearGradient
                    colors={[
                        auth.user.company.secondaryColor,
                        auth.user.company.mainColor,
                    ]}
                    style={{
                        width: SCREEN_WIDTH * widthValue,
                        height: normalize(40),
                        alignItems: 'center',
                        justifyContent: 'center',
                        borderRadius: normalize(10),
                        padding: 10,
                    }}>
                    <Title color={colorText}>{title}</Title>
                </LinearGradient>
            </Container>
        </TouchableOpacity>
    );
};

export default BtnGradient;

const Container = styled.View<{background: string}>`
    width: ${(props: {widthValue: number}) =>
        SCREEN_WIDTH * props.widthValue}px;
    justify-content: center;
    align-items: center;
    border-radius: ${normalize(10)}px;
    margin: ${normalize(5)}px;
`;
const Title = styled.Text<{color: string}>`
    color: ${(props: {color: string}) => props.color};
    font-size: ${normalize(16)}px;
`;

使用依赖版本 #

• react-i18next: ^13.5.0
• i18next: ^23.7.9
• react: 18.2.0
• react-native: 0.71.8

问题排查与解决方案 #

1. 文本容器换行与宽度限制 #

部分安卓设备字体渲染逻辑特殊，相同字号文本实际占用宽度更大，当前Title组件未配置换行属性，超出容器后直接截断。

修改Title组件样式：

const Title = styled.Text<{color: string}>`
    color: ${(props: {color: string}) => props.color};
    font-size: ${normalize(16)}px;
    text-align: center;
    flex-wrap: wrap;
    max-width: 100%;
`;

• flex-wrap: wrap：允许文本自动换行
• max-width: 100%：限制文本宽度不超过父容器
• text-align: center：保证换行后文本居中

2. 固定容器高度导致裁剪 #

LinearGradient设置了固定高度normalize(40)，文本换行后高度超出容器会被裁剪。

修改LinearGradient样式：

<LinearGradient
    colors={[
        auth.user.company.secondaryColor,
        auth.user.company.mainColor,
    ]}
    style={{
        width: SCREEN_WIDTH * widthValue,
        minHeight: normalize(40), // 替换固定height为minHeight
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: normalize(10),
        paddingVertical: 10, // 拆分padding为垂直/水平，优化空间
        paddingHorizontal: 10,
    }}>
    <Title color={colorText}>{title}</Title>
</LinearGradient>

3. normalize函数适配偏差 #

自定义normalize函数可能在部分设备像素密度计算上出错，导致尺寸适配异常。

改用官方PixelRatio适配：

import { PixelRatio } from 'react-native';

const fontSize = 16 * PixelRatio.getFontScale();

const Title = styled.Text<{color: string}>`
    color: ${(props: {color: string}) => props.color};
    font-size: ${fontSize}px;
    text-align: center;
    flex-wrap: wrap;
    max-width: 100%;
`;

4. 系统字体缩放影响 #

部分荣耀/三星用户开启了系统字体缩放，导致文本实际尺寸超出预期。

禁用文本组件字体缩放：

<Title color={colorText} allowFontScaling={false}>{title}</Title>

或全局禁用（按需选择）：

// 在App.js入口添加
import { Text } from 'react-native';
Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;

内容的提问来源于stack exchange，提问作者Antonio Rodríguez