我很难理解ScrollView如何在React Native中工作。在我看来,我有一个滚动视图,该滚动视图包装在具有flex:1的containerStyle的containerview中。但是,我视图中的元素不会滚动。.
render(){ const {containerStyle,eventsWrapperStyle,footerStyle} =样式 返回(
<View style={containerStyle}>
<Header/>
<ScrollView style={eventsWrapperStyle}>
{this.renderEvents()}
{this.renderMonthlyStats()}
</ScrollView>
<Footer>
<View style={styles.footerButtonsWrapper}>
<Button customStyle={styles.footerButtonStyle} onPress = {() => this.props.resetAppInfo()}>NEW</Button>
<Button customStyle={styles.footerButtonStyle} onPress={() => this.props.logoutUser()}>SIGN OUT</Button>
</View>
</Footer>
</View>
)
}
const styles = {
monthlyStatsWrapper: {
margin: 10,
flexDirection: 'column'
},
monthlyStatsLine: {
width: '85%',
alignItems: 'center',
marginTop: 10,
flexDirection: 'row',
justifyContent: 'space-between'
},
containerStyle: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
},
footerButtonsWrapper: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
footerButtonStyle: {
width: 170
},
eventsWrapperStyle: {
marginTop: 50,
padding: 30,
flex: 1,
paddingBottom: 100,
}
};
您能帮我了解一下scrollView的工作原理,并使其中的元素滚动吗?
下面是绝对定位的Footer元素的代码(可能是问题的一部分吗?)
class Footer extends Component {
render(){
const { footerStyle } = styles;
return (
<View style={[footerStyle, this.props.customStyle]}>
{this.props.children}
</ View>
);
}
};
const styles = {
footerStyle: {
position: 'absolute',
width: '100%',
bottom: 0,
height: 130,
backgroundColor: '#FCFCFC'
}
};