ScrollView中的元素不会滚动React native

时间:2018-09-29 11:22:14

标签: react-native scrollview

我很难理解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,
  }
};

enter image description here 您能帮我了解一下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'

  }
};

enter image description here

0 个答案:

没有答案