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

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

我已经这样做了， 我正在关注这个文档。我面临的问题是单次点击会影响所有折叠组件。 卡片的大小也只是增加而没有展开或显示文本。如下所示

Answer 1

如果要在react-native中使用可折叠组件（Accordion），则有一个名为react-native-accordion的包。

为了使该组件正常工作，需要提供两个必需的header和content您可以在github repo或npm包中阅读有关它的更多信息。

Answer 2

我最近刚刚发布了这样一个组件。 反应原生可折叠视图。 一探究竟！
新PM
Github
小吃现场演示