ReactNative Layout Process и как flex влияет на него? - PullRequest
Новая
       5

ReactNative Layout Process и как flex влияет на него?

0 голосов
/ 22 января 2020

Я пытаюсь понять, почему приведенные ниже макеты работают по-разному.

Может кто-нибудь объяснить, как происходит внутренний процесс макета, с точки зрения правил? И почему приведенные ниже примеры ведут себя по-разному. Кроме того, чтобы просто сказать, что это так.

Пример 1: 

return (
<View style = {{borderWidth : 1, borderColor : 'red'}}>
    <View style = {{borderWidth : 1, borderColor : 'black'}}>
        <Text>TestText</Text>
    </View>
</View>
    )

Это отображает красный прямоугольник вокруг черного прямоугольника вокруг текста. Это означает, что View изменяется в зависимости от его содержимого. внутреннее представление изменяет размеры, чтобы рассмотреть текст, внешнее представление рассматривает внутреннее представление (которое уже учло внутренний текст, чтобы определить его размеры), следовательно, все соответствует ожиданиям.

Example2: 

return (
<View style = {{borderWidth : 1, borderColor : 'red'}}>
    <View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
        <Text>TestText</Text>
    </View>
</View>
    )

текст теперь выходит за пределы обоих видов. Внутренний вид все еще лежит внутри внешнего вида.

Теперь я попробовал немного другой вариант:

Пример 3: 

    return <View style = {{borderWidth:1, borderColor:'red', height:10}}>
        <View style = {{flex:1, borderWidth:1, borderColor:'black'}}>
        <Text>HelloWorld</Text>
        </View>
    </View>

Этот рендеринг немного лучше, т.е. По крайней мере, текст начинается внутри обоих представлений. Но все же не так, как ожидалось.

Вопросы, которые у меня есть:

1) в случае № 2 выше, Почему текст выходит за пределы обоих представлений? В то время как внутренний вид все еще остается внутри внешнего?

Может ли какой-либо контент когда-либо go выходить за пределы родительского представления? Разве родительский View не должен расширяться, чтобы содержать его, если мы не предоставили ему определенные c размеры?

2) В случае № 3 все ведет себя немного, как и ожидалось .. Текст находится в представлениях несколько, но все еще переполняется ..

3) Как происходит это рендеринг внутри ReactNative внутри и как он определяет эффективную высоту этих представлений выше?

Ответы [ 2 ]

1 голос
/ 30 января 2020

Пример с flex

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

enter image description here

<View style={{   borderColor: "red",     height: 60 }}>
  <View style={{ borderColor: "black", flex: 1 }}>
    <Text>HelloWorld</Text>
    ...
  </View>
</View>

Пример без flex: 1

Здесь без flex, «Черный вид» будет занимать все пространство своих дочерних элементов, не имеет значения высота родительского элемента («Красный вид»).

enter image description here

<View style={{   borderColor: "red",  height: 60 }}>
  <View style={{ borderColor: "black"  }}>
    <Text>HelloWorld</Text>
    ...
  </View>
</View>
0 голосов
/ 22 января 2020

Дело в том, что в случае 2-го элемента схема плохо себя ведет, например: 

<View style = {{borderWidth : 1, borderColor : 'red'}}>
    <View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
        <Text>TestText</Text>
    </View>
</View>

Это потому, что родительский компонент View не имеет свойства flex, поэтому он не занимает весь пространство и, поскольку вы добавили flex:1 in the child View, оно пытается занять все пространство, как выделено, поэтому черная граница доминирует, а TestText находится под ним.

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

<View style = {{flex:1,borderWidth : 1, borderColor : 'red'}}>
    <View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
        <Text>TestText</Text>
    </View>
</View>

Надеюсь, это поможет. не стесняйтесь сомнений

...