为什么“flex”-Property在反应原生中不再起作用？

Question

使用React-Native 0.26，当将“flex:1”传递给标题并将“flex:9”传递给另一个视图时，我可以按比例1:10设置带有标题和大面板的屏幕。

然而，最新的React-Native＆gt; 0.40这不再适用了。

我的风格有什么问题？

这是渲染功能：

  render() {
    return (
      <View style={s.container}>
        <View style={s.progressBar}>
          <Progress.Bar progress={this.state.progress} width={200} />
        </View>
        <ListView
          style={s.listView}
          enableEmptySections={true}
          keyboardShouldPersistTaps="always"
          keyboardDismissMode="on-drag"
          dataSource={this.state.dataSource}
          renderRow={(contact) => this._renderContact(contact)}
        />
      </View>

    )
  }

这些是样式：

const s = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  progressBar: {
    flex: 1,
    backgroundColor: 'lightgray',
    height: 20,
    alignSelf: 'stretch',
  },

  listView: {
    flex: 10,
    alignSelf: 'stretch',
  }

});

现在发生这种情况：

Wether flex: 1正在运作，height - 属性。是否传递这些属性并不重要。它总是将屏幕划分为2个具有相同高度的子视图：

我想要达到的目的是让灰色区域的高度为屏幕的20像素或10％。

Answer 1

对于scrollview，尝试使用＆＃34; contentContainerStyle＆＃34;传递样式。丙

Answer 2

您应该将ListView标记包装在View中，并将样式放在View上：

＆＃13;

＆＃13;

<View style{{flex: 1}}>
    <View style={{flex: 1}}>
        <Text>This is my header</Text>
    </View>
    <View style={{flex: 10}}>
        <ListView
          dataSource={YOUR_SOURCE}
          renderRow={YOUR_RENDER_CALLBACK}
        />
    </View>
</View>

＆＃13;

＆＃13;

＆＃13;