React Native 将字符串拆分为多个文本标签答案

【问题标题】：React Native split string into multiple text tagsReact Native 将字符串拆分为多个文本标签
【发布时间】：2017-04-28 00:25:16
【问题描述】：

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

如何在每一行拆分字符串并以编程方式为其生成文本标签？

例如：

"paragraph1...

paragraph2...."

进入：

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

【问题讨论】：

标签： string text react-native newline

【解决方案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;
}

【讨论】：

对于阅读此答案的人，elements 和 position 不能是常量，因为它们的值在 while 循环中发生变化。它们应该是变量（let 或 var）。
很好地调用 position 被声明为 let。 elements 可以保持const，因为变量存储的是对对象的引用，而不是实际的对象，所以永远不会真正改变。

【解决方案2】：

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

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

【讨论】：