反应本机，ScrollView的孩子不会填充全高

所以我有一个水平滚动视图在视图的顶部。 ScrollView包含具有指定宽度的节点。然后，我在ScrollView的底部有一个边框，就像您在此屏幕上所看到的一样：http://i.imgur.com/pOV1JFP.png 反应本机，ScrollView的孩子不会填充全高

正如您所看到的，顶部的ScrollView的子节点没有到达边界。但是，如果我将滚动视图更改为flexDirection: 'row'的视图，则子节点将填充高度。我试着在滚动视图改变一些特性，如：

上contentContainerStyle
automaticallyAdjustContentInsets={false}
设置padding:0改变的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> 
    ); 
    } 
}

来源

2016-01-19 agmcleod

您可以显示ScrollView和父级的代码和样式吗？ –

感谢您的代码，现在核对一下。 –

您是否尝试过为容器组件设置高度？我已经得到了你正在工作的东西，但我必须给组件一个高度属性：https://rnplay.org/apps/QP4sBw –

有一个叫contentContainerStyle了滚动属性。我刚刚解决了类似的问题，我将flex：1设置为：ScrollView样式，scrollView contentContainerStyle和子View组件。

来源

2017-10-23 11:04:21

反应本机，ScrollView的孩子不会填充全高

回答

相关问题