React Native 插件系列之foldview(可折叠视图)

一、插件简介

  一种可折叠的视图插件,官方示例图如下:

  

二、插件适用范围

  非常适合列表页面单项展示不开的情况

三、使用代码示例

  下载下来,有Demo,改改就行;

  

<FoldView
                        expanded={this.state.expanded}
                        onAnimationStart={this.handleAnimationStart}
                        perspective={1000}
                        renderBackface={this.renderBackface}
                        renderFrontface={this.renderFrontface}
                        isRefresh={this.state.isRefresh}
                        >
                        <PhotoCard onPress={this.flip} item={item} parent={this}/>
                    </FoldView>

   其中,renderFrontface={this.renderFrontface}为折叠状态就展示的内容;renderBackface={this.renderBackface}为展开状态展示的第二块内容;<PhotoCard onPress={this.flip} item={item} parent={this}/>为展开状态展示的第一块内容;

  此插件只是嵌套,所以PhotoCard也可以是foldview;所以才能有例子上的效果;

四、相关错误及解答

  1、报错:Invalid layout for (119)...

  为什么会出现这个错误呢?

  后来看官方的Issues,居然需要修改插件的源代码,那干脆把文件直接copy到本地修改好了。

  找到FoldView.js,在432行修改代码如下:

  

 五、生产运用

  再好的例子也得运行到生产环境

    还款记录仪

  

 

posted @ 2017-08-14 11:49  执着的卫星  阅读(1381)  评论(0编辑  收藏  举报