位于行尾时不显示包含空格的嵌套文本组件

Question

我正在尝试在文本中使用由空格组成的占位符。当占位符位于行首或中间时，它可以正常工作，但当位于行尾时，它根本不会呈现。

<Container>
  <View>
    <Text style={{fontSize: 18}}>
      <Text style={{ backgroundColor: 'pink' }}>
        This TEXT is the first part of the sentence
      </Text>
      <Text style={{ backgroundColor: 'black' }}>{'   '}</Text>
      <Text style={{ backgroundColor: 'green' }}>
        This is the second part
      </Text>
    </Text>
  </View>
</Container >

正常行为：

奇怪的行为：

上下文：

• 在 Android 上运行
• 版本：“react”：“16.8.3”，“react-native”：“0.59.8”，

编辑：通过将普通空格字符替换为“\u00a0”字符（即“不间断空格”）解决了我的问题

Answer 1

所以看看其他答案，看起来修复有点脏Answer Here

这就是我所做的：

        <View>
          <Text style={{fontSize: 18}}>
            <Text style={{ backgroundColor: 'pink' }}>
              This TEXT is the first part of the sentence
            </Text>
         </Text>
          <View style={{flexDirection: 'row'}}>
            <Text style={{ backgroundColor: 'black', fontSize: 18 }}>{'   '}</Text>
              <Text style={{ backgroundColor: 'green', fontSize: 18 }}>
                This is the second part
              </Text>
            </View>
        </View>

这是snack example

希望这会有所帮助！