React Native Text не ограничен пределами контейнера View

Question

Я создаю приложение, работающее в режиме реального времени. В нем я хочу создать 2 колонки макета. Название контента слева и данные справа.

<View>
  <Text>Some title</Text>
  <Text>Some pretty long content</Text>
<View>

Таким образом, оно должно отображаться как:

*--------------------------*
| Some Title   Some pretty |
|              long content|
*--------------------------*

Но сейчас происходит следующее:

*--------------------------*
| Some Title   Some pretty long
|              content     |
*--------------------------*

Таким образом, текст, кажется, не принимает ширину в соответствии с шириной его родителя.

Вот как это выглядит:

Иерархия представления такова:

<View> -- 100% width 

  <View> -- Margin of 10 & padding of 5 & curved border

    <View> -- Flex row & a 1px border to show its expected width

       <Text>Title</Text>
       <Text>Content</Text> -- Overflowing text 

       <Text>Title</Text>
       <Text>Content</Text> -- Overflowing text 

       .
       .
       .

       <Text>Title</Text>
       <Text>Content</Text> -- Overflowing text 

    </View>

  </View>

</View>

Я могу добавить код CSS и TSX, если хотите, но я суммировал важные биты выше.

Answer 1

Flex Wrap: Wrap Flex: 1 Установите это для ваших таблиц стилей текста, если стиль просмотра имеет направление изгиба в качестве строки.

В качестве альтернативы Попробуйте ширину как 100% для родительского просмотра и текстов.

Answer 2

Пожалуйста, попробуйте добавить width="100%" к вашему Text компоненту.

P.S: Я должен был спросить об этом в комментарии, но новый пользователь StackOverFlow здесь.