Question

我在容器内有一个图片和一个文本组件，其弯曲方向行适合我的屏幕的100％。没有为文本组件指定大小，容器也没有指定大小。

当我有一个大单词时，“文本”组件会以“-”剪掉其内容的结尾；当我有一堆小单词时，“文本”组件会在给定单词之后剪切其内容；当我只有一个小词时（用例），Text组件会以随机字符切出词的结尾，尽管它有足够的空间来呈现文本。

这是我的代码段：

import React from 'react';
import Icon from 'react-native-vector-icons/MaterialIcons';

import { Container, Top, Logo, Title } from './styles';

import logo from '../../assets/Nubank_Logo.png';

export default function Header() {
  return (
    <Container>
      <Top>
        <Logo source={logo} />
        <Title>Bruno</Title>
      </Top>
      <Icon name="keyboard-arrow-down" size={20} color="#fff" />
    </Container>
  );
}

import styled from 'styled-components/native';

export const Container = styled.View`
  align-items: center;
  padding: 40px 0 30px 0;
`;

export const Top = styled.View`
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
`;

export const Logo = styled.Image``;

export const Title = styled.Text`
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  margin-left: 8px;
`;

And here is an screenshot of the result of this code

Answer 1

经过大量研究，我发现了造成问题的原因。

我有一台配备Android 9的OnePlus 6手机。我使用的是 OnePlus Slate 作为手机的默认字体。

问题在于，React Native Text组件会根据您使用的字体剪切文本的结尾。这个错误已经存在了一段时间，但他们仍然没有找到解决方案。这是他们在github上的页面上的一些问题：

以及我在其中找到解决方案的评论： https://github.com/facebook/react-native/issues/15114#issuecomment-520112872

我的解决方案

由于我的手机可以选择更改系统字体系列，因此我进行了测试，将其更改为Roboto。在实际情况下，您需要将应用程序的默认字体系列更改为Roboto。

React Native：在视图中适合文本的内容，没有特定大小

1 个答案: