Мне сложно понять, как работает ScrollView в React Native.На мой взгляд, у меня есть scrollview, который обернут в контейнер с помощью containerStyle, который имеет flex: 1.Однако элементы внутри моего представления не прокручиваются ..
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'
}
};