Реагировать на размер контейнера scrollView - PullRequest
Новая
       23

Реагировать на размер контейнера scrollView

0 голосов
/ 24 апреля 2018

У меня есть некоторые компоненты, завернутые в ScrollView, и для некоторых условий самый нижний компонент не должен отображаться.Когда это происходит, я использую LayoutAnimation, чтобы скрыть это.Проблема в том, что когда компонент исчезает, ScrollView сразу переходит на новую высоту содержимого без какой-либо анимации.Я хочу использовать LayoutAnimation, так как у меня есть экраны, где высота содержимого неизвестна.

Пример изображения

Если вы посмотрите на изображение, когда нажата кнопка,Экран мгновенно переместится в синее поле без анимации. 

state = { showGreenBox: false };

  renderBottomBox() {
    if (this.state.showGreenBox) {
      return (
        <View style={{ height: 300, width: 100, backgroundColor: 'green' }} />
      );
    }
  }

  render() {
    return (
      <ScrollView>
        <View style={{ height: 300, width: 100, backgroundColor: 'red' }} />
        <View style={{ height: 300, width: 100, backgroundColor: 'blue' }} />
        {this.renderBottomBox()}

        <TouchableOpacity
          onPress={() => {
            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
            this.setState({ showGreenBox: !this.state.showGreenBox });
          }}
        >
          <Text>Press to collapse green box</Text>
        </TouchableOpacity>
      </ScrollView>
    );
  }
...