javascript - 如何为文本之间的某些字符添加文本样式

Question

我正在寻找解决此 React-SketchApp 错误的方法。

在发布此内容时，我的解决方案是在未嵌套的文本上使用 flexbox，并使其具有嵌套的外观。

<Text style={myStyle}>This is a </Text><Bold>word</Bold><Text> in a sentence.</Text>

风格：

flex-direction: row; justify-content: flex-start;

这适用于文本在同一行的情况。但是如果说一个粗体元素在一个文本块内而不是在一个简单的行上，那我该怎么办？也许是一些花哨的 CSS 或 javascript 技巧？

Answer 1

您可以通过嵌套组件来实现这一点，Text如反应本机文档嵌套文本中所述

<Text style={myStyle}>This is a 
  <Text style={{ fontWeight: 'bold' }}> word</Text> in a sentence.
</Text>

Answer 2

您朝着正确的方向flexDirection: 'row'寻求解决方法，但您仍然需要Text像这样嵌套元素：

<Text style={{flexDirection: 'row' }}>
  This is a <Text style={{fontWeight: 'bold'}}>bold word</Text> in a sentence
</Text>

Answer 3

将<Text>标签视为<p>，<span>标签在 HTML 中类似。您可以将其<Text>用作块级元素和内联级元素。你想要达到的目标，你可以做到，

<Text style={{ color: 'blue' }}>I am a an amazing 
  <Text style={{ fontWeight: 'bold' }}> green</Text> line. I hope you 
  like it. or you can even do multiple nesting 
  <Text style={{ fontSize: '16'}}> of 
    <Text style={{ color: 'red' }}> multiple</Text> 
    elements
  </Text>
</Text>

我希望这有帮助。