Flex работает только на компоненте View?

Question

Информации об этом нет в официальных документах. Они просто показывают примеры с компонентом View, но не говорят, что применять flex к компоненту Text неправильно. В этой статье говорится:

Макет Flexbox доступен только для компонентов View.

Но когда я проверяю это:

import * as React from 'react';
import { Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={{flex:1, padding:10,}}>
        <Text style={{flex:1,backgroundColor:'red'}}>
          Some Text
        </Text>
      </View>
    );
  }
}

закуска

Так почему flex:1 работает с текстовым компонентом, если он не поддерживает?

Answer 1

Указанный вами источник может быть неточным. Вы, безусловно, можете применить flex свойства к <Text> компоненту (по крайней мере, нет документации, которая говорит об обратном). Однако это не является чем-то обычным или рекомендуемым.

React Собственные документы описывают <Text> как:

Компонент React для отображения текста.

И <View> компоненты как:

Наиболее фундаментальный компонент для создания пользовательского интерфейса, View - это контейнер, который поддерживает макет с flexbox, стилем, некоторой обработкой касаний и элементами управления доступом

Интересный факт: React Native использует Yoga Layout Engine для легкого построения макетов.

Answer 2

Я предполагаю, что это поддерживается. По своему личному опыту я видел, что он работал с Text, TextInput, Image, TouchableOpacity и так далее. Если элемент является элементом, который может отображаться внутри или среди других элементов на макете экрана, на него должно повлиять flex.

Однако лучше будет использовать его таким образом или нет. Я думаю, что это хороший пример разделения интересов . Text здесь для отображения текста и его оформления. Если мы хотим изменить макет, мы должны использовать View: обернуть Text с View и применить все необходимые стили макета и позиционирования. Это устранит всю путаницу в отношении того, каковы основные обязанности каждого элемента, и когда дело доходит до простоты кодирования, также позволит нам всегда знать, что для макета - мы ссылаемся на View, а для отображения текста - мы ссылаемся на Text. Это единообразие сделает вашу отладку, работу в команде и работу по наследству намного проще для восприятия.