Question

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

更新

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。我面临的问题是单个onclick会影响所有崩溃组件。此外，卡的大小只是在不扩展或显示文本的情况下增加。如下所示

Answer 1

如果你想在react-native中使用可折叠组件（Accordion），那么就会有一个名为react-native-accordion的包。

为了让这个组件工作，需要有两个必需的道具header和content你可以在github repo或npm包中阅读更多关于它的信息。

Answer 2

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

如何做一个动画可折叠组件反应原生？

2 个答案: