Question

我正在尝试将域内反应本机组件显示的一些文本存储为字符串。问题是文本中的某些单词需要不同的样式，因此需要包装在另一个文本标签中。例如：

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

如何保存单个单词在存储时的样式，无论是在领域还是在任何其他数据库中？即有没有办法在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;
        }
      })}
    </>
  );
}

将字符串转换为jsx in react native

2 个答案: