Получение NaN при попытке использовать новый Animated.Value () в React Native

Question

Я пытаюсь реализовать разборную карту в React Native, и, независимо от используемой реализации, постоянно получаю одну и ту же ошибку:

[555, "RCTView", 211, {"onLayout ": true," height ":" << NaN >> "}] не может использоваться как аргумент собственного метода

Проблема заключается в использовании new Animated.Value(), когда я инициализирую его значением скажем new Animated.Value(100), ошибка исчезает, и функциональность работает, но максимальная высота - это та константа, которую я ввожу, а это не то, что я хочу. Таким образом, кажется, что он не передает никаких значений в Animated.Value, если он возвращает NaN.

Я не уверен, является ли это ожидаемым поведением, но я предполагаю, что это не так, поскольку мой код почти точно такой же, как здесь: Создайте компонент анимированной складной карты с начальными опорами для показать или скрыть

Я буду вставлять свой код независимо от:

Card. js:

import {Text, View, TouchableHighlight, StyleSheet, Animated} from 'react-native'

export default class Card extends React.Component{
  anime = {
      height: new Animated.Value(),
      expanded: false,
      contentHeight: 0,
  }

  constructor(props) {
      super(props);

      this._initContentHeight = this._initContentHeight.bind(this);
      this.toggle = this.toggle.bind(this);

      this.anime.expanded = props.expanded;
  }

  _initContentHeight(evt) {
      if (this.anime.contentHeight>0) return;
      this.anime.contentHeight = evt.nativeEvent.layout.height;
      this.anime.height.setValue(this.anime.expanded ? this._getMaxValue() : this._getMinValue() );
  }

  _getMaxValue() { return this.anime.contentHeight };
  _getMinValue() { return 0 };

  toggle() {
      Animated.timing(this.anime.height, {
          toValue: this.anime.expanded ? this._getMinValue() : this._getMaxValue(),
          duration: 300,
      }).start();
      this.anime.expanded = !this.anime.expanded;
  }

  render() {
      return (
          <View style={styles.titleContainer}>
              <View style={styles.title}>
                  <TouchableHighlight underlayColor="transparent" onPress={this.toggle}>
                      <Text>{this.props.title}</Text>
                  </TouchableHighlight>
              </View>

              <Animated.View style={[styles.content, { height: this.anime.height }]} onLayout={this._initContentHeight}>
                  {this.props.children}
              </Animated.View>
          </View>
      );
  }
}

var styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    margin:10,
    overflow:'hidden'
    },
  titleContainer: {
    flexDirection: 'row'
    },
  card: {
    padding: 10
  }
});

SearchDisplay. js:

import { Text } from 'react-native';
import Card from '../components/Panel';

export default class SearchDisplay extends React.Component {
render (){
    return (
      <Card title='Customized Card 1' expanded={false}>
                <Text>Hello, this is first line.</Text>
                <Text>Hello, this is second line.</Text>
                <Text>Hello, this is third line.</Text>
            </Card>
    )
  }
}

Заранее извиняюсь, если что-то действительно очевидное, что я пропускаю.

Answer 1

В качестве начального значения присвойте ему 0. Затем вы можете попытаться получить высоту компонента animated.view и установить его в значение в состоянии.

https://reactnative.dev/docs/view#onlayout

Но я не уверен, что вы можете или не можете поместить его в Animated.Value (). Кто знает, может сработает: -)

Answer 2

NAN означает, что вы вычисляете математическую операцию c, но в своей функциональности вы передаете нецелое значение