小编Kao*_*ono的帖子

在React Native中折叠项目

我想就如何在React本机中制作可折叠项目提供一些建议。我试过使用:react-native-collapsible甚至:react-native-accordion。但是似乎oblador的一个在此版本的React native上不再起作用,而另一个则很难使用或自定义。这是我想做的:

它看起来像什么,按图标后最终变成这样

我将代码分成2个文件,一个用于自定义视图,另一个输入其标题和项目。

手风琴

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({ …
Run Code Online (Sandbox Code Playgroud)

javascript accordion collapse react-native

5
推荐指数
0
解决办法
2130
查看次数

标签 统计

accordion ×1

collapse ×1

javascript ×1

react-native ×1