Javascript 在React Native中折叠项目

我想就如何在React native中制作可折叠项目提供一些建议。我试过使用：react native collapsible甚至：react native accordion。但似乎奥拉多尔的一款不再适用于React native的这个版本，而另一款则很难使用或定制。以下是我想做的：

但是

我将代码分为两个文件，一个用于自定义视图，另一个用于输入其标题和项目

accordion.js

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

        this.icons = {
            'up'    : require('../image/keyboard_arrow_right_black_192x192.png'),
            'down'  : require('../image/keyboard_arrow_down_black_192x192.png')
        };

        this.state = {
          title: props.title,
          expanded: true,
          animation: new Animated.Value()
        };
    }

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

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

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

        return (
          <Animated.View style={[styles.makeup_container,{height: this.state.animation}]}>
            <View style={styles.makeup_layout}
                  onLayout={this._setMinHeight.bind(this)}>
                <TouchableOpacity style={styles.title_container}>
                  <Text style={styles.makeup_text}>{this.state.title}</Text>
                </TouchableOpacity>
                <TouchableHighlight
                   style={styles.icon_container}
                   onPress={this.toggle.bind(this)}
                   underlayColor="#f1f1f1">
                   <Image
                       style={styles.icon_view}
                       source={icon}
                   ></Image>
               </TouchableHighlight>
            </View>
            <View style={styles.children_container}
                  onLayout={this._setMaxHeight.bind(this)}>
                {this.props.children}
            </View>
          </Animated.View>
        );
    }
}

类AccordionCustom扩展组件{
建造师（道具）{
超级（道具）；
此图标={
“向上”：需要（“../image/keyboard_arrow_right_black_192x192.png”），
“向下”：需要（“../image/keyboard\u arrow\u down\u black\u 192x192.png”）
};
此.state={
标题：props.title，
对,，
动画：新的动画.Value（）
};
}
切换（）{
让
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.state.expanded
});
this.state.animation.setValue（initialValue）；
春天(
这个州，动画，
{
toValue：最终价值
}
).start（）；
}
_setMaxHeight（事件）{
这是我的国家({
maxHeight:event.nativeEvent.layout.height
});
}
_设置最小高度（事件）{
这是我的国家({
最小高度：event.nativeEvent.layout.height
});
}
render（）{
让icon=this.icons['down']；
if（this.state.expanded）{
图标=这个。图标['up']；
}
返回(
{this.state.title}
{this.props.children}
);
}
}

home.js

<View style={styles.accordion_container}>
                  <AccordionCustom title="Trang Điểm"
                                   style={styles.accordion_padding}>
                    <View style={{flex: 1, flexDirection: 'column'}}>
                      <TouchableOpacity style={styles.accordion_comp}><Text style={styles.makeupComp_text}>Sản Phẩm Cho Mắt</Text></TouchableOpacity>
                      <TouchableOpacity style={styles.accordion_comp}><Text style={styles.makeupComp_text}>Sản Phẩm Cho Mặt</Text></TouchableOpacity>
                      <TouchableOpacity style={styles.accordion_comp}><Text style={styles.makeupComp_text}>Sản Phẩm Cho Môi</Text></TouchableOpacity>
                      <TouchableOpacity style={styles.accordion_comp}><Text style={styles.makeupComp_text}>Sản Phẩm Cho Móng</Text></TouchableOpacity>
                      <TouchableOpacity style={styles.accordion_comp}><Text style={styles.makeupComp_text}>Cọ Và Dụng Cụ Khác</Text></TouchableOpacity>
                    </View>
                  </AccordionCustom>
                </View>

sản Phẩm Cho mắT
sản Phẩm Cho mặT
sản Phẩm Cho môi
sản Phẩm Cho móng
Cọ 维生素Dụng Cụ 哈克

---

请向我推荐一个库或其他方法来更正我的代码。

您可以尝试使用Native base来使用Accordion

样本输出：

使用。

---

它似乎正好满足您的需要。

试试手风琴，它对我来说非常适合

用法

首先，从npm获取软件包：

npm install --save react-accessible-accordion

然后，导入编辑器并在代码中使用它。以下是一个基本示例：

import React from 'react';

import {
    Accordion,
    AccordionItem,
    AccordionItemHeading,
    AccordionItemButton,
    AccordionItemPanel,
} from 'react-accessible-accordion';

// Demo styles, see 'Styles' section below for some notes on use.
import 'react-accessible-accordion/dist/fancy-example.css';

export default function Example() {
    return (
        <Accordion>
            <AccordionItem>
                <AccordionItemHeading>
                    <AccordionItemButton>
                        What harsh truths do you prefer to ignore?
                    </AccordionItemButton>
                </AccordionItemHeading>
                <AccordionItemPanel>
                    <p>
                        Exercitation in fugiat est ut ad ea cupidatat ut in
                        cupidatat occaecat ut occaecat consequat est minim minim
                        esse tempor laborum consequat esse adipisicing eu
                        reprehenderit enim.
                    </p>
                </AccordionItemPanel>
            </AccordionItem>
            <AccordionItem>
                <AccordionItemHeading>
                    <AccordionItemButton>
                        Is free will real or just an illusion?
                    </AccordionItemButton>
                </AccordionItemHeading>
                <AccordionItemPanel>
                    <p>
                        In ad velit in ex nostrud dolore cupidatat consectetur
                        ea in ut nostrud velit in irure cillum tempor laboris
                        sed adipisicing eu esse duis nulla non.
                    </p>
                </AccordionItemPanel>
            </AccordionItem>
        </Accordion>
    );
}

import 'react-accessible-accordion/dist/fancy-example.css';