Question

我遇到一个问题，即文本数量（在我的情况下为ToS）无法正确呈现在屏幕上（当字符串使文本字段大于8000的高度时会发生这种情况）。我已经阅读了问题的解决方案是将ToS拆分为多个文本标签。

我怎样才能在每个新行拆分字符串并以编程方式为其生成文本标记？

例如：

"paragraph1...

paragraph2...."

成：

<Text>paragraph1...</Text>
<Text>paragraph1...</Text>

Answer 1

这是未经测试的，但我在我构建的应用程序中做了类似的事情。

原则是你遍历你的文本字符串并将其拆分成任何所需长度的块，将每个块包装在它自己的<Text>元素中并将其附加到数组中。

编辑：或者，您可以修改此功能，以便在换行符而不是特定长度上拆分字符串。

import { Text } from 'react-native';

export function split(string, length = 1000) {
  // Split text into individual words and count length
  const words = string.split(' ');
  const count = words.length;

  // Prepare elements and position tracker
  const elements = [];
  let position = 0;

  // Loop through words whilst position is less than count
  while (position < count) {
    // Prepare text for specified length and increment position
    const text = words.slice(position, length).join(' ');
    position += length;

    // Append text element
    elements.push((
      <Text>{text}</Text>
    ));
  }

  return elements;
}

Answer 2

您可以查看react-native-parsed-text（https://github.com/taskrabbit/react-native-parsed-text）

它可能比您需要的多一点，但您可以轻松匹配换行符并为每行渲染一个新组件

React Native将字符串拆分为多个文本标记

2 个答案: