Flex vs flexGrow vs flexShrink vs flexBasis in React Native?

Наконец, я обновил реакцию нативную до 0,42, которая включает введение flexGrow, flexShrink и flexBasis, а изменение (или исправление) способа отображения flex.

Может кто-нибудь объяснить разницу между flex: 1 vs flexGrow: 1. Если я применяю то или другое к представлению, кажется, что он делает разные вещи, но не должен ли он делать то же самое?

Ответы

Ответ 1

Вот пример тестового кода:

render() {
    return <View style={{flex: 1,backgroundColor: "cornflowerblue"}}>
        <View style={{backgroundColor: "chartreuse"}}><Text>Nothing (17px)</Text></View>

        <View style={{flex: 0, backgroundColor: "yellow"}}><Text>flex: 0 (17px)</Text></View>

        <View style={{flex: 0, flexBasis: 10, backgroundColor: "brown"}}><Text>flex: 0, flexBasis: 10 (10px)</Text></View>
        <View style={{flex: 0, flexGrow: 1, backgroundColor: "orange"}}><Text>flex: 0, flexGrow: 1 (97px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, backgroundColor: "tan"}}><Text>flex: 0, flexShrink: 1 (17px)</Text></View>
        <View style={{flex: 0, flexGrow: 1, flexBasis: 10, backgroundColor: "purple"}}><Text>flex: 0, flexGrow: 1, flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, flexBasis: 10, backgroundColor: "gray"}}><Text>flex: 0, flexShrink: 1, flexBasis: 10 (10px with 7px hidden below the next element)</Text></View>

        <View style={{flex: 1, backgroundColor: "blue"}}><Text>flex: 1 (80px)</Text></View>

        <View style={{flex: 1, flexBasis: 10, backgroundColor: "cornsilk"}}><Text>flex: 1, flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, backgroundColor: "red"}}><Text>flex: 1, flexGrow: 1 (80px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, backgroundColor: "green"}}><Text>flex: 1, flexShrink: 1 (80px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, flexBasis: 10, backgroundColor: "aqua"}}><Text>flex: 1, flexGrow: 1, flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, flexBasis: 10, backgroundColor: "pink"}}><Text>flex: 1, flexShrink: 1, flexBasis: 10 (90px)</Text></View>
    </View>;
}

Вот скриншот вышеуказанного кода:

Добавлено width и height:

render() {
    return <View style={{flex: 1,backgroundColor: "cornflowerblue"}}>
        <View style={{flex: 0, backgroundColor: "orange"}}><Text>flex: 0 (17px)</Text></View>
        <View style={{flex: 0, width: 700, height: 20, backgroundColor: "yellow"}}><Text>flex: 0, width: 700, height: 20 (20px)</Text></View>

        <View style={{flex: 0, flexBasis: 10, width: 700, height: 20, backgroundColor: "brown"}}><Text>flex: 0, flexBasis: 10, width: 700, height: 20 (10px with 7px hidden below the next element)</Text></View>
        <View style={{flex: 0, flexGrow: 1, width: 700, height: 20, backgroundColor: "orange"}}><Text>flex: 0, flexGrow: 1, width: 700, height: 20 (90px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, width: 700, height: 20, backgroundColor: "tan"}}><Text>flex: 0, flexShrink: 1, width: 700, height: 20 (20px)</Text></View>
        <View style={{flex: 0, flexGrow: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "purple"}}><Text>flex: 0, flexGrow: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "gray"}}><Text>flex: 0, flexShrink: 1, flexBasis: 10, width: 700, height: 20 (10px with 7px hidden below the next element)</Text></View>

        <View style={{flex: 1, backgroundColor: "orange"}}><Text>flex: 1 (70px)</Text></View>
        <View style={{flex: 1, width: 700, height: 20, backgroundColor: "blue"}}><Text>flex: 1, width: 700, height: 20 (70px)</Text></View>

        <View style={{flex: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "cornsilk"}}><Text>flex: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, width: 700, height: 20, backgroundColor: "red"}}><Text>flex: 1, flexGrow: 1, width: 700, height: 20 (70px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, width: 700, height: 20, backgroundColor: "green"}}><Text>flex: 1, flexShrink: 1, width: 700, height: 20 (70px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "aqua"}}><Text>flex: 1, flexGrow: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "pink"}}><Text>flex: 1, flexShrink: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
    </View>;
}

Вот скриншот вышеуказанного кода:

`flex: 0` (по умолчанию)

flex: 0
- Элемент принимает размер содержимого. В соответствии с документацией его нужно определить, установив реквизиты width и height, но, похоже, соответствует содержимому, если они не установлены.
flex: 0, flexBasis: {{px}}
- Элемент принимает размер, заданный flexBasis
flex: 0, flexGrow: 1
- С flex: 0 и flexGrow: 1; это то же самое, что и добавление размера содержимого (в приведенном выше примере а) к размеру элемента, установленного на flex: 1. Он похож на flex: 1, flexBasis: 10 за исключением того, что вместо добавления количества пикселей вы добавляете размер содержимого.
flex: 0, flexShrink: 1
- С flex: 0 и flexShrink: 1 элемент, кажется, принимает размер содержимого, другими словами, он такой же, как только flex: 0. Я готов поспорить, что есть ситуации, когда это будет больше, чем контент, но я пока этого не вижу.
flex: 0, flexGrow: 1, flexBasis: {{px}}
- Это то же самое, что и flex: 0, flexGrow: 1 за исключением того, что вместо добавления размера контента в элемент flex: 1 он добавляет заданное количество пикселей.
flex: 0, flexShrink: 1, flexBasis: {{px}}
- Это то же самое, что и flex: 0, flexBasis: {{px}}.
flex: 0, height: {{px}}
- С flex: 0, height обрабатывается так же, как flexBasis. Если установлены как height, так и flexBasis, height игнорируется.

`flex: 1`

flex: 1
- Элемент получает доступное пространство. Подробнее см. Документация по размещению документации.
flex: 1, flexBasis: {{px}}
- С flex: 1 и flexBasis: {{px}}; к размеру элемента добавляется значение flexBasis. Другими словами, это похоже на принятие элемента flex: 1 и добавление количества пикселей, заданных flexBasis. Поэтому, если элемент flex: 1 равен 50px, и вы добавляете flexBasis: 20, элемент теперь будет 70px.
flex: 1, flexGrow: 1
- игнорировали
flex: 1, flexShrink: 1
- игнорировали
flex: 1, flexGrow: 1, flexBasis: {{px}}
- Это то же самое, что и flex: 1, flexBasis: {{px}}, поскольку flexGrow игнорируется.
flex: 1, flexShrink: 1, flexBasis: {{px}}
- Это то же самое, что и flex: 1, flexBasis: {{px}}, поскольку flexShrink игнорируется.
flex: 1, height: {{px}}
- С flex: 1, height игнорируется. Вместо этого используйте flexBasis.

Вот мои наблюдения:

Совет по устранению неполадок: Убедитесь, что родительское представление дает детской комнате возможность расти/сокращаться. Обратите внимание на flex: 1 на родительском представлении, без него все дети не отображаются так, как вы ожидали.
Совет по устранению неполадок: Не используйте Hot Reloading при тестировании этих значений, он может отображать элементы неправильно после перезагрузки несколько раз. Я рекомендую включить Live Reload или использовать command + r (много).
Значение flex по умолчанию flex: 0. Если вы не добавляете значение стиля flex, оно по умолчанию равно 0.
Совет по устранению неполадок:, если вы пытаетесь выяснить, почему что-то не отображается, как вы думаете, должно быть, начинайте с (самого) родительского элемента и убедитесь, что он дает достаточно места для это дети делать то, что им нужно делать. Другими словами, попробуйте установить его в flex: 1 и посмотрите, поможет ли это, затем перейдите к следующему ребенку и повторите.
Кажется, что width всегда рассматривается с flexDirection: "column" независимо от других реквизитов flex. То же самое относится к height с flexDirection: "row".
После запуска этого теста в общем случае я использовал бы flexBasis над height, так как flexBasis trumps height.

Ответ 2

кто-то объясните это по-английски, пожалуйста.