尝试在 React Native 中使用 new Animated.Value() 时获取 NaN答案

【问题标题】：Getting NaN when trying to use new Animated.Value() in React Native尝试在 React Native 中使用 new Animated.Value() 时获取 NaN
【发布时间】：2020-07-13 20:51:59
【问题描述】：

我正在尝试在 React Native 中实现一个可折叠卡片，无论我使用哪种实现，都会不断收到相同的错误：

[555,"RCTView",211,{"onLayout":true,"height":">"}] 不能用作本机方法参数

问题在于使用new Animated.Value()，当我用一个值初始化它时，比如new Animated.Value(100)，错误消失并且功能有效，但最大高度是我输入的常量，这不是什么我想。所以，它似乎没有将任何值传递给 Animated.Value 让它返回 NaN。

我不确定这是否是预期的行为，但我假设它不是因为我的代码与此处几乎完全相同：Make animated collapsible card component, with initial props to show or hide

无论如何我都会粘贴我的代码：

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>
    )
  }
}

如果我忽略了一些非常明显的事情，请提前道歉。

【问题讨论】：

标签： javascript react-native

【解决方案1】：

作为初始值，给它一个0。然后你可以尝试获取animated.view组件的高度并将其设置为状态值。

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

但我不确定您是否可以将其放在 Animated.Value() 中。谁知道，它可能有效:-)

【讨论】：

【解决方案2】：

Animated.Value 应该用一些像 0 这样的初始值来初始化，否则你可以直接使用 0 作为你的初始高度。

【讨论】：

【解决方案3】：

NAN 表示您在计算数学运算，但您在函数中传递了非整数值

【讨论】：