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

【问题标题】：How to add text style to some characters in between a Text如何为文本之间的某些字符添加文本样式
【发布时间】：2017-09-18 08:43:47
【问题描述】：

我正在寻找解决 this React-SketchApp bug 的工作。

在发布此内容时，我的解决方案是在未嵌套的文本上使用 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 技巧？

【问题讨论】：

标签： javascript css reactjs react-native react-sketchapp

【解决方案1】：

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

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

【讨论】：

请练习为您的代码添加描述性描述，说明其工作原理和/或这样做的原因。

【解决方案2】：

将<Text> 标记视为类似于 HTML 中的<p>、<span> 标记。您可以将<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>

我希望这会有所帮助。

【讨论】：

不幸的是，嵌套的 TEXT 标签现在不适用于 React-SketchApp，这是一个已知的错误（请参阅上面的链接）。然而 react-SketchApp 有这样的承诺，我想要一个解决方法，直到错误得到修复。

【解决方案3】：

您使用flexDirection: 'row' 找到了解决方法，但您仍然需要像这样嵌套Text 元素：

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

【讨论】：