React Native：在没有特定大小的情况下将文本的内容放入视图中

Question

我在 Container 中有一个 Image 和一个 Text 组件，具有 flex-direction适合我屏幕 100% 的行。 Text 组件没有指定大小，Container 也没有。

当我有一个太大的单词时，Text 组件会用“-”截断它的内容；当我有一堆小词时，文本组件会在给定词后剪切它的内容；当我有一个小单词（我的用例）时，文本组件会以随机字符剪切单词的结尾，即使它有足够的space来呈现文字.

这是我的代码片段：

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

经过大量研究，我找到了问题的原因。

我有一个 OnePlus 6 phone android 9。我使用 OnePlus Slate 作为我 phone 的默认字体。

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

https://github.com/facebook/react-native/issues/15114

https://github.com/facebook/react-native/issues/17026

https://github.com/facebook/react-native/issues/17629

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

我的解决方案

因为我的 phone 可以选择更改系统字体系列，所以我只是将其更改为 Roboto，作为测试。在实际情况下，您需要将应用的默认字体系列更改为 Roboto。

React Native：在没有特定大小的情况下将文本的内容放入视图中

React Native: Fit Text's content inside View without specific size

react-native

react-native-android