反应原生，ScrollView 的孩子不会填满全高答案

【问题标题】：React native, children of ScrollView wont fill full height反应原生，ScrollView 的孩子不会填满全高
【发布时间】：2016-04-25 03:42:54
【问题描述】：

所以我在视图顶部有一个水平滚动视图。 ScrollView 包含具有指定宽度的节点。然后我在 ScrollView 的底部有一个边框，就像你在这个屏幕截图中看到的那样：http://i.imgur.com/pOV1JFP.png

如您所见，顶部的 ScrollView 的子节点没有到达边界。但是，如果我将 ScrollView 更改为带有flexDirection: 'row' 的视图，则子节点会很好地填充高度。我尝试更改滚动视图上的一些属性，例如：

在contentContainerStyle 上设置padding:0
automaticallyAdjustContentInsets={false}
直接更改contentInsets的值

这些似乎都不能解决问题。

滚动视图代码和样式：

var styles = StyleSheet.create({
  nav: {
    padding: 0,
    marginTop: 30,
    flex: 1,
    borderBottomWidth: 1,
    borderColor: '#000000'
  }
});

<ScrollView
  style={[{width: screen.width}, styles.nav]}
  horizontal={true}
  showsHorizontalScrollIndicator={true}
  automaticallyAdjustContentInsets={false}>
  {dayNavItems}
</ScrollView>

子组件（组成 dayNavItems）

const styles = StyleSheet.create({
  container: {
    paddingLeft: 15,
    paddingRight: 15,
    width: 50,
    justifyContent: 'center'
  },
  odd: {
    backgroundColor: '#ccc'
  },
  selected: {
    backgroundColor: '#39b54a'
  },
  text: {
    fontFamily: 'Optima'
  }
});

class DayNavItem extends React.Component {
  static propTypes = {
    day: React.PropTypes.object.isRequired,
    odd: React.PropTypes.bool,
    selectDay: React.PropTypes.func.isRequired,
    selected: React.PropTypes.bool
  };

  render() {
    const d = new Date(this.props.day.created_at);
    const viewStyles = [styles.container];
    if (this.props.selected) {
      viewStyles.push(styles.selected);
    } else if (this.props.odd) {
      viewStyles.push(styles.odd);
    }
    return (
      <TouchableOpacity style={viewStyles} onPress={() => this.props.selectDay(this.props.day.uuid)}>
        <View>
          <Text style={styles.text}>{getMonth(d)}</Text>
          <Text style={styles.text}>{d.getDate()}</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

【问题讨论】：

有什么方法可以显示 ScrollView 和父级的代码和样式？
感谢您的代码，现在检查一下..
您是否尝试过为容器组件设置高度？我得到了类似你正在工作的东西，但我必须给组件一个高度属性：rnplay.org/apps/QP4sBw
我还没试过纳德。我真的不想让滚动视图是 flex 的，滚动视图的兄弟姐妹也是如此。

标签： flexbox react-native

【解决方案1】：

添加contentContainerStyle={{flexGrow: 1}} 即可解决问题。

<ScrollView contentContainerStyle={{flexGrow: 1}}>

</ScrollView>

【讨论】：

这应该是被接受的答案。 + 您也应该将子视图设置为 flex:1。高度将被填充，滚动也将起作用。
@DevAS 内容容器包含滚动视图的子节点。 flexGrow 属性指定该项目相对于同一容器内的其他灵活项目将增长多少。将flexGrow: 1 设置为内容容器将使容器的内容发光以填满容器的整个高度
这应该是公认的答案，就像一个魅力
这应该更广为人知。感谢您的回答！
接受这个答案！

【解决方案2】：

ScrollView 有一个名为 contentContainerStyle 的属性。我刚刚解决了一个类似的问题，我将flex: 1 设置为ScrollView 的styles、ScrollView 的contentContainerStyle 和子View 组件。

【讨论】：

【解决方案3】：

其他答案是正确的，但只是为了提供一个澄清的例子：

<ScrollView contentContainerStyle={{ flex: 1 }}>
  {children}
</ScrollView>

【讨论】：

请注意，在 contentContainerStyle 上使用 flex: 1 会在内容超出 ScrollView 高度的情况下中断滚动。（您将无法在 ScrollView 中滚动）您希望仅在您的 contentContainerStyle 上使用 flexGrow: 1。资料来源：我刚刚在我的应用程序中这样做了，上面 Raphael 的回答解决了这个问题。

【解决方案4】：

为 ScrollView 的 contentContainerStyle 属性设置 flex: 1 对我有用。

【讨论】：

【解决方案5】：

如果 ScrollView 被包裹在 SafeAreaView 中，请将 flex: 1 放在 SafeAreaView 上，经过数小时的调试后，这对我有用...

家长：

Child（我实现的样式 ScrollView 与您报告的当前问题无关）：

【讨论】：

为外部视图设置 {flex:1} 对我有用。

【解决方案6】：

我为那些像我一样只想要开箱即用的 ScrollView 的人制作了一个简单的包，而不必一直应用样式以使其正常工作。

https://github.com/SrBrahma/pagescrollview

用法：

import { PageScrollView } from 'pagescrollview';

<PageScrollView>
  {/** Your contents */}
</PageScrollView>

【讨论】：