如何在本机反应中制作动画可折叠组件？

Question

大家好，如何在 react native 中制作自定义动画可折叠组件？尝试了几个文档但不起作用。任何人都可以提供一个有用的文档。请帮忙。

更新

constructor(props){
        super(props);

        this.icons = {
            'up'    : require('../Images/Arrowhead.png'),
            'down'  : require('../Images/Arrowhead-Down.png')
        };

        this.state = {
            title       : props.title,
            expanded    : false,
            animation   : new Animated.Value(),
            details: []
        };
    }
     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
        });

        this.state.animation.setValue(initialValue);
        Animated.spring(
            this.state.animation,
            {
                toValue: finalValue
            }
        ).start();

    }

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

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

    componentWillMount(){
        fetch('https://www.mywebsite.com' )
        .then((response) => response.json())
        .then((responseData) =>
          this.setState({
              details:responseData
              })
              );
    }

    showDetailsFunction(){
         let icon = this.icons['down'];

        if(this.state.expanded){
            icon = this.icons['up'];
        }

            return this.state.details.map(detail =>
              <ScrollView>
               {detail.data.curriculum.map(curr =>
              <Animated.View 
                style={[styles.container,{height: this.state.animation}]}>
                {curr.type == 'section'? ( 
                <View onLayout={this._setMinHeight.bind(this)}>
                <Card>
                <CardSection>
                <TouchableHighlight onPress={this.toggle.bind(this)} underlayColor="#f1f1f1">
                <Image style={styles.buttonImage} source={icon}></Image>
                </TouchableHighlight>
                <View style={styles.thumbnailContainerStyle}>
                <Text style={styles.userStyle1}>
                    {curr.title}
                </Text>
                </View>
                </CardSection>
                </Card>
                </View> 
            ): (<Text></Text>)}
            <View style={styles.body} onLayout={this._setMaxHeight.bind(this)}>
                    {this.props.children}
                        <Text>hiii</Text>
                </View> 

            </Animated.View>
            )}  
        </ScrollView>
            );
    }
    render(){

   return(
   <View>
   {this.showDetailsFunction()}
                </View>
        );
  }

我已经这样做了， i'm following this doc。我面临的问题是单次点击会影响所有折叠组件。卡片的大小也只是增加而不扩展或显示文本。如下所示

Answer 1

我最近刚刚发布了这样一个组件。 react-native-collapsible-view。看看吧！
NPM
Github
Live demo on Snack