Элементы внутри ScrollView не прокручивают React native - PullRequest
0 голосов
/ 29 сентября 2018

Мне сложно понять, как работает 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,
  }
};

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...