如何在文本之间的某些字符中添加文本样式

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

将 <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>

我希望这会有所帮助。

Answer 3

您使用flexDirection: 'row'朝正确的方向进行解决方案，但您仍然需要嵌套Text元素这样的元素：

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