反应本机,ScrollView的子项不会填满整个高度 [英] React native, children of ScrollView wont fill full height
本文介绍了反应本机,ScrollView的子项不会填满整个高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
所以我在视图的顶部有一个水平滚动视图。ScrollView包含具有指定宽度的节点。然后我在ScrollView的底部有一个边框,就像您在这个屏幕帽中看到的那样:http://i.imgur.com/pOV1JFP.png
如您所见,顶部的ScrollView的子节点不会到达边界。但是,如果我将ScrollView更改为带有flexDirection: 'row'
的View,则子节点可以很好地填充高度。我尝试更改了滚动视图上的一些属性,例如:
- 将
padding:0
设置为contentContainerStyle
automaticallyAdjustContentInsets={false}
- 直接更改
contentInsets
的值
这些似乎都无法解决问题。
滚动视图代码&;Style:
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>
子组件(组成day NavItems)
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>
);
}
}
推荐答案
添加contentContainerStyle={{flexGrow: 1}}
可以解决问题。
<ScrollView contentContainerStyle={{flexGrow: 1}}>
</ScrollView>
这篇关于反应本机,ScrollView的子项不会填满整个高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文