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

Posted 2023-03-24

【中文标题】如何在本机反应中制作动画可折叠组件？

【英文标题】：How to do an animated collapsible component in react native?

【发布时间】：2018-07-06 10:58:49

【问题描述】：

大家好，如何在 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。我面临的问题是单次点击会影响所有折叠组件。卡片的大小也只是增加而不扩展或显示文本。如下所示

【问题讨论】：

你能详细说明你到底想做什么

我已经更新了我的问题

github.com/oblador/react-native-collapsible 试试看这个插件，你可以根据你的要求改变用户界面。

【参考方案1】：

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