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行修改代码如下：

　　

　五、生产运用

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

　　　　

　　

 

转载于:https://www.cnblogs.com/yrcn/p/7339111.html