Question

在发布此消息时，我的解决方案是在未嵌套的文本上使用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组件实现这一点，如反应原生文档中所述nested 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>

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

3 个答案: