ScrollView не соблюдает гибкие правила

Question

Это приводит к тому, что экран наполовину синий и наполовину желтый, не должен ли он быть 2/3 желтым?

    <View style={{flex:1,flexDirection:'column'}}>
       <View style={{flex:1,backgroundColor: 'blue'}}></View>
       <ScrollView style={{flex:2}} contentContainerStyle={{flex:1,backgroundColor: 'yellow'}}></ScrollView>
    </View>

Answer 1

В целом вы правы, но реакция ScrollView на натив работает немного по-другому.Как вы можете прочитать в документах :

Имейте в виду, что ScrollViews должны иметь ограниченную высоту, чтобы работать, так как они содержат дочерние элементы неограниченной высоты в ограниченном контейнере (через взаимодействие прокрутки).Чтобы ограничить высоту ScrollView, либо установите высоту представления напрямую (не рекомендуется), либо убедитесь, что все родительские представления имеют ограниченную высоту.Если вы забудете передать {flex: 1} вниз по стеку представлений, это может привести к ошибкам, которые инспектор элементов упрощает отладку.

Чтобы добиться желаемого поведения, вы можете сделать следующее:

<View style={{flex:1,flexDirection:'column'}}>
       <View style={{flex:1,backgroundColor: 'blue'}}></View>
       <View style={{flex:2}}> // surround scrollview with flex 2 
        <ScrollView contentContainerStyle={{flex:1,backgroundColor: 'yellow'}}></ScrollView>
       </View>
</View>