Подтвердить что ты не робот

React Native Stylesheet: что делает {flex: 1}?

React Native использует flexbox для макета. Во всех примерах, которые я видел, они делают что-то вроде этого:

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row'
  }
});

Мне интересно узнать о части flex: 1. На основе определения Криса Койе здесь https://css-tricks.com/snippets/css/a-guide-to-flexbox/, flex: 1 должно быть таким же, как flex-grow: 1, но для меня это выглядит как flex: 1 в React Native эквивалентно до display: flex в CSS.

Здесь CodePen, демонстрирующий, что flex: 1 способ использования примеров React Native не делает ничего в CSS:

http://codepen.io/johnnyo/pen/BoKbpb

Пока мы не используем display: flex в CSS до тех пор, пока flexbox не начнет работать:

http://codepen.io/johnnyo/pen/epZXgz

Значит ли это, что flex: 1 в React Native эквивалентен display: flex в CSS?

4b9b3361

ОТВЕТЫ

Ответ 1

Существует отличная разница между css flexbox и тем, что реализовано Facebook. Много общего, но по умолчанию очень разные. В частности:

Everything is display: flex by default. All the behaviors of block and inline-block can be expressed in term of flex but not the opposite.

flex: атрибут используется только тогда, когда на одном уровне имеется несколько компонентов с разными значениями гибкости (flex: 1, flex: 3) означает, что второй элемент должен быть в 3 раза больше, чем первый. атрибут flex является единственным поддерживаемым (без поддержки роста/сжатия).

Дополнительная информация: https://github.com/facebook/css-layout

Ответ 2

Замечание к ответу Жарека Потюка: "flex: 1" действительно делает что-то в реагировании, как и в случае гибкого роста. Даже если это единственная с flex: определена.

Стили, такие как flexDirection, alignItems, justifyContent, определяют стиль дочерних элементов элемента. Подобно CSS Display: flex, который также определяет детей.

Напротив, flex: x определяет сам элемент.

например. если компонент контейнера имеет flexDirection: 'row', alignItems: 'center'
И есть 3 ребенка:

ребенок 1 имеет ширину 50

у ребенка 2 есть flex 1 (или любое другое число, но 1 является обычной практикой)

ребенок 3 имеет ширину 50

Затем средний компонент будет "растягиваться", чтобы 3 ребенка вместе заполнили всю ширину родительского компонента.

Ответ 3

Во многих руководствах используется flex: 1, очень похоже на то, что вы делали в своем примере. Основная причина в том, что иногда (в зависимости от элемента, такого как ListStyle по умолчанию, если моя память служит), компонент не будет занимать весь экран/область, если вы не определяете размеры, такие как высота (например, height: '400px'). Flex: это круто, потому что он делает вещи отзывчивыми для разных размеров.

Но я должен отметить, что для любого компонента, у которого нет родных элементов, значение для flex абсолютно произвольно. Ex. для вашего компонента верхнего уровня вы можете сказать flex: 43254315 и он делает то же самое, что и flex: 1. Это просто означает "занять все пространство" (какими бы "целыми" это ни было).

С другой стороны, если у вас есть родственные компоненты, значение flex имеет большое значение. Например, если один компонент является flex: 2 а другой является flex: 3, то первый занимает 2/5 экрана, а второй занимает 3/5 экрана.

Вкратце: в зависимости от ваших стилей это может выглядеть как flex: 1 - это то же самое, что display: flex, но это только из-за того, как вы используете его в своем примере. Вы увидите, что это будет действовать по-другому, если вы просто дадите ему братьев и сестер.

Ответ 4

Как и вы, я изо всех сил пытался понять этот тег, который не был правильно документирован в коде Facebook, но в конце концов я обнаружил, что он выполняет две вещи:

  • Контейнеры рассматривают любые дети с атрибутом flex, чтобы иметь высоту 0 с целью определения того, сколько места они занимают.
  • Компоненты с flex: X расширяются, чтобы заняться любой комнатой, оставшейся в контейнере после того, как были выложены другие компоненты. Они разделяют это дополнительное пространство пропорционально их значениям X.

Первый элемент: почему flex: 1 может выглядеть так же, как display: flex. Рассмотрим следующий код JSX:

<ExampleAppContainer>
    <Text>
        I get printed.
    </Text>
    <Text style={{flex: 1}}>
        But I don't :(
    </Text>
</ExampleAppContainer>

Только первый текстовый компонент печатается, потому что второй считается, что он имеет высоту 0. ExampleAppContainer выделяет достаточно места для первого текстового компонента, и нет места для разворачивания второго.

Теперь рассмотрим этот код:

<ExampleAppContainer style={{flex:1}}>
    <Text>
        I get printed.
    </Text>
    <Text style={{flex: 1}}>
        And so do I!
    </Text>
</ExampleAppContainer>

Так как ExampleAppContainer имеет flex: 1, он расширяется, чтобы занимать столько места, сколько может. Предполагая, что это корневой компонент для части React вашего приложения, обычно это будет весь экран телефона. Затем он выделяет достаточное пространство для первого текстового компонента и позволяет второму текстовому компоненту расширяться, занимая остальную часть экрана.

Таким образом вам часто придется применять flex: 1 до конца иерархии компонентов, чтобы позволить вашим самым сокровенным компонентам с flex: N комнатой правильно раскрыть.

Ответ 5

это очень просто, просто подумайте, что когда вы говорите flex: 1 для любого элемента, этот элемент получает всю высоту родительского элемента, если этот элемент имеет flex: 1, а родительский элемент не имеет всю высоту размера экрана.

например, вы хотите иметь один контейнерный элемент, который получает всю высоту экрана, и у этого элемента есть три дочерних элемента, каждый элемент имеет 1/3 высоты экрана, для этого примера просто получите родительский элемент flex: 1 и три дочерних элемента flex: 1/3 см код ниже

<View style={{flex: 1,backgroundColor: 'red'}}>

        <View style={{flex: 1/3, backgroundColor: 'green'}}></View>

        <View style={{flex: 1/3, backgroundColor: 'yellow'}}></View>

        <View style={{flex: 1/3, backgroundColor: 'pink'}}></View>

      </View>

Ответ 6

flex: 1

  1. Сообщает компоненту заполнить все доступное пространство (совместно используемое другими компонентами с тем же родителем).

  2. Если есть дочерние компоненты со значениями flex, их родительский элемент должен иметь значение flex: 1 (или выше). Если родительский объект не имеет фиксированной ширины, высоты или гибкости, родительский объект будет иметь размеры 0, а дочерние элементы flex не будут видны.