制作可折叠的动画卡片组件，并带有初始道具来显示或隐藏 [英] Make animated collapsible card component, with initial props to show or hide

问题描述

背景

使用React Native，我可以制作可折叠的卡片组件.在图标"上单击，卡将向上滑动以隐藏其内容，或展开以显示其内容.我认为设置默认值就像将设置扩展为false或true一样容易，但是我认为这里的问题是，当切换默认值时，会触发动画，从而改变卡的高度.

Using React Native I was able to make collapsible card component. On Icon click the card slides up hiding its content, or expands showing its content. I would think setting the default value would be as easy as setting expanded to false or true, but I think the problem here is that when it is toggled an animation is triggered which changes the height of the card.

示例

class CardCollapsible extends Component{
  constructor(props){
    super(props);

    this.state = {
      title: props.title,
      expanded: true,
      animation: new Animated.Value(),
      iconExpand: "keyboard-arrow-down",
    };
  }

  _setMaxHeight(event){
      this.setState({
          maxHeight   : event.nativeEvent.layout.height
      });
  }

  _setMinHeight(event){
      this.setState({
          minHeight   : event.nativeEvent.layout.height
      });

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

  toggle(){
    let initialValue    = this.state.expanded? this.state.maxHeight + this.state.minHeight : this.state.minHeight,
        finalValue      = this.state.expanded? this.state.minHeight : this.state.maxHeight + this.state.minHeight;

    this.setState({
      expanded : !this.state.expanded
    });

    if (this.state.iconExpand === "keyboard-arrow-up") {
      this.setState({
        iconExpand : "keyboard-arrow-down"
      })
    } else {
      this.setState({
        iconExpand : "keyboard-arrow-up"
      })
    }
    this.state.animation.setValue(initialValue);
    Animated.spring( this.state.animation, {
        toValue: finalValue
      }
    ).start();
  }

  render(){

    return (
      <Animated.View style={[styles.container,{height: this.state.animation}]}>
          <View style={styles.titleContainer} onLayout={this._setMinHeight.bind(this)}>
            <CardTitle>{this.state.title}</CardTitle>
            <TouchableHighlight
              style={styles.button}
              onPress={this.toggle}
              underlayColor="#f1f1f1">
              <Icon
                name={this.state.iconExpand}
                style={{ fontSize: 30 }}/>
            </TouchableHighlight>
          </View>
          <Separator />
          <View style={styles.card} onLayout={this._setMaxHeight.bind(this)}>
            {this.props.children}
          </View>
      </Animated.View>
    );
  }
}

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

export { CardCollapsible };

打开

关闭

问题

我的目标是允许调用组件的人员将组件的初始状态设置为展开或打开.但是，当我尝试将扩展状态更改为false时，它不会呈现为关闭状态.

My goal is to allow a person calling the component to set the initial state of the component to expanded or open. But when I try changing the expanded state to false it does not render closed.

我该如何允许允许用户调用组件选择在初始组件渲染时是展开还是关闭?

How would I go about allowing the user calling the component to select whether it is expanded or closed on initial component render?

推荐答案

为您打造了一个全新的产品.简单且可以正常工作.

Made a brand new one for you. Simple and works fine.

注意:此组件不需要state.状态更少，性能更好.

Note: no state required for this component. fewer state, better performance.

也许您可以在此=)上修改自己的样式

Maybe you could modify your own style on top of this =)

class Card extends 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>
        );
    }
}

用法:

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

视觉结果:(仅第二张牌以expanded={true}开头，其他牌以expanded={false}开头)

Visual result: (only second card start with expanded={true}, others with expanded={false})

这篇关于制作可折叠的动画卡片组件，并带有初始道具来显示或隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！