Компонент «Вложенный текст», содержащий пробелы, не отображается при расположении в конце строки

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
• версии: «реакция»: «16.8.3», «реакция-нативная»: «0.59.8»,

Редактировать: Решил мою проблему, заменив обычные пробелы на символы "\ u00a0", или "неразрывный пробел"

Answer 1

Итак, глядя на другие ответы, похоже, что исправление немного грязное Ответ здесь

Итак, вот что я сделал:

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

и вот пример закуски

Надеюсь, это поможет!