React 原生文本在渲染时被剪切

Question

我正在用 React Native 制作一个应用程序，这在大多数设备上都可以正常工作，但在 Honor 和一些三星设备中，文本突然被剪切。

我如何呈现我的文本？

我附上一个如何制作的示例：

在 Src/localization/global_es.json 中

{
"closeSegment": "Concluir segmento",
}

在我的组件中：

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

哪里

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;
    //box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.25);
`;
const Title = styled.Text<{color: string}>`
    color: ${(props: {color: string}) => props.color};
    font-size: ${normalize(16)}px;
`;

希望的结果： 渲染所有文本“Concluir segmento”

得到的结果：

库： "react-i18next": "^13.5.0", "i18next": "^23.7.9", “反应”：“18.2.0”， "react-i18next": "^13.5.0", “反应本机”：“0.71.8”，

Answer 1

这可能与 Android 设备默认

fontWeight

设置有关。有些用户会将默认字体设置为粗体。如果您的代码未在文本中指定任何

fontWeight

属性，则某些文本可能会被截断。 Github Issue 于 2024 年提出，但仍在发生。

要解决此问题，请在文本样式中添加

fontWeight: 'bold'

即可解决该问题。