Question

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

正如您所看到的，顶部ScrollView的子节点不会到达边界。但是，如果我将ScrollView更改为具有flexDirection: 'row'的视图，则子节点将填充高度。我尝试更改滚动视图中的一些属性，例如：

在padding:0

contentContainerStyle

automaticallyAdjustContentInsets={false}
直接更改contentInsets的值

这些似乎都无法解决问题。

滚动视图代码＆amp;式：

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>
    );
  }
}

Answer 1

contentContainerStyle有一个名为ScrollView的属性。我刚刚解决了类似问题，我将flex: 1设置为ScrollView styles，ScrollView＆＃39; s contentContainerStyle，以及孩子View组件。

Answer 2

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

Answer 3

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

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

Answer 4

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

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

</ScrollView>

Answer 5

如果ScrollView包裹在SafeAreaView内，则将flex：1放在SafeAreaView上，这在经过数小时的调试后对我有用。

父母：

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

Answer 6

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

https://github.com/SrBrahma/pagescrollview

用法：

import { PageScrollView } from 'pagescrollview';

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

React native，ScrollView的子项不会填满整个高度

6 个答案: