React native, дети ScrollView не заполняют всю высоту

Так что у меня есть горизонтальная прокрутка в верхней части представления. ScrollView содержит узлы, которые имеют указанную ширину. Затем у меня есть граница в нижней части ScrollView, как вы можете видеть в этой шапке экрана: http://i.imgur.com/pOV1JFP.png

Как вы можете видеть, дочерние узлы ScrollView вверху не достигают границы. Однако если я изменю ScrollView на View с flexDirection: 'row', тогда дочерние узлы заполняют высоту точно. Я попытался изменить несколько свойств прокрутки, таких как:

  • Установка padding:0 для contentContainerStyle
  • 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>
    );
  }
}

Ответ 1

Существует свойство называется contentContainerStyle для ScrollView. Я просто решил аналогичную проблему, где я поставил flex: 1 к ScrollView styles, ScrollView contentContainerStyle, и ребенок View компонента.

Ответ 2

Установка flex: 1 для ScrollView contentContainerStyle собственности помогло.

Ответ 3

Другие ответы верны, но только для пояснения:

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

Ответ 4

Добавление contentContainerStyle={{flexGrow: 1}} поможет.

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

</ScrollView>