react-native scrollview现在是否尊重flex？

Question

我正在学习flex native for react native。这是我的代码：

import React, { Component } from 'react';

import {
  Text,
  View,
  ScrollView
} from 'react-native';

const style = {
  container: {
    flex:1,
    flexDirection:'column',
    flexWrap:'nowrap',
    alignItems:'stretch',
  },
  title: {
    flex:1,
    backgroundColor:'blue',
  },
  terms: {
    flex:8,
    flexDirection:'column',
    backgroundColor:'red',
  },
  termsText: {
    padding:15,
    flex:1,
  },
  check: {
    flex:1,
    backgroundColor:'yellow',
  }
};


export default class Home extends Component {

    constructor(props)
    {
        super(props);
    }

  render() {

    return (

        <View style={style.container}>
            <Text style={style.title}>Terms and Conditions</Text>
            <ScrollView style={style.terms}>
            <Text style={style.termsText}>You must comply, or die...</Text>
            </ScrollView>
            <Text style={style.check}>Check mark here (tap to agree to terms)</Text>
        </View>

    );

  }
}

结果如下：

这不是我的预期。我期待红色区域占据垂直高度的80％，因为style.terms.flex == 8。如果我将渲染的内容更改为：

  render() {

    return (

        <View style={style.container}>
            <Text style={style.title}>Terms and Conditions</Text>
            <Text style={style.terms}>You must comply, or die...</Text>
            <Text style={style.check}>Check mark here (tap to agree to terms)</Text>
        </View>

    );

  }

然后我可以让红色区域变成80％的垂直高度。为什么ScrollView不尊重style.terms.flex？

Answer 1

“请记住，ScrollViews必须具有有限的高度才能工作，因为它们将无限高度的子项包含在有界容器中（通过滚动交互）。”来自反应原生文档。你可以做的是使用反应原生的Dimensions API，而不是给ScrollView 80％的设备高度。

More on ScrollView

Dimensions

Answer 2

对ScrollView使用Dimensions Api

const { width, height } = Dimensions.get('window');

<ScrollView style={{ height: height * 0.8 }}>
    <Text style={style.termsText}>You must comply, or die...</Text> 
</ScrollView>

高度* 0.8相对于屏幕尺寸获得80％的高度