将字符串转换为React天然中的JSX

Question

我试图将React Native组件显示的一些文本作为字符串作为字符串。问题在于文本中的某些单词需要不同的样式，因此需要包裹在另一个文本标签中。例如：

        <Text>
        <Text> some text </Text>
        <Text style={{ fontWeight: 'bold' }}>bold word</Text>
        <Text> more text </Text>
        </Text>

无论是在领域还是任何其他数据库中，我如何保留单词存储时的样式？IE。有没有办法将字符串呈现为react Native中的JSX？

Answer 1

我认为这是不可能的，因为JSX在运行时没有解析。

但是，您可以以HTML格式存储文本并将其渲染到WebView中。您可以相应地设置WebView。

Answer 2

为了渲染多色字符串，我使用了该实用程序。您可以尝试写类似的东西

import React from 'react';
import {ReactNode} from 'react';
import {Text} from 'react-native';
// In order to use this function, you need to pass strings of the type:
// 'Hello ||#FF5843|world||'
export function colorText(str: string): ReactNode {
  return (
    <>
      {str.split('||').map((item) => {
        if (item.indexOf('|') !== -1) {
          const coloredText = item.split('|');
          return <Text style={{color: coloredText[0]}}>{coloredText[1]}</Text>;
        } else {
          return item;
        }
      })}
    </>
  );
}