Filter 的参数配置
navConfig: [ { type: 'RelatePanel', // type可以不提供，默认值为'RelatePanel' text: '向下', // 配置筛选头文案 icons: { // 配置 icon，分为正常形态和点击选中形态 normal: '//gw.alicdn.com/tfs/TB1a7BSeY9YBuNjy0FgXXcxcXXa-27-30.png', active: '//gw.alicdn.com/tfs/TB1NDpme9CWBuNjy0FhXXb6EVXa-27-30.png', }, hasSeperator: true, // 展示竖线分隔符 formatText: text => text + '↓', // 筛选文案的格式化函数 }, { type: 'QuickSearch', optionsIndex: 0, optionsKey: 'price', options: [ // 快速排序列表 { text: '价格', icon: '', value: '0', }, { text: '升序', icon: '//gw.alicdn.com/tfs/TB1PuVHXeL2gK0jSZFmXXc7iXXa-20-20.png', value: '1', }, { text: '降序', icon: '//gw.alicdn.com/tfs/TB1a7BSeY9YBuNjy0FgXXcxcXXa-27-30.png', value: '2', }, ], }, { type: 'RelatePanel', // type可以不提供，默认值为'RelatePanel' text: '旋转', icons: { // 配置 icon，分为正常形态和点击选中形态 normal: '//gw.alicdn.com/tfs/TB1PuVHXeL2gK0jSZFmXXc7iXXa-20-20.png', active: '//gw.alicdn.com/tfs/TB1l4lIXhv1gK0jSZFFXXb0sXXa-20-20.png', }, animation: { type: 'rotate' }, // 配置动画点击后旋转图片，默认没有动画 }, { type: 'RelatePanel', // type可以不提供，默认值为'RelatePanel' text: '向左', }, { type: 'PureUI', text: '订阅', renderItem: () => { // 渲染自定义的 UI return ( <Image style={{ width: 120, height: 92, }} source={{ uri: 'https://gw.alicdn.com/tfs/TB1eubQakL0gK0jSZFAXXcA9pXa-60-45.png' }} /> ); }, }, ] // ... <Filter offsetTop={100} // offsetTop = RecycleView上面的组件的高度，当前为 100 navConfig={this.state.navConfig} // Filter Navbar 配置项 keepHighlight={true} // 保持变更的高亮 styles={styles} // 配置覆盖内置样式，大样式对象集合 onChange={this.handleSearchChange} // Panel 面板显示隐藏变更事件 onPanelVisibleChange={this.handlePanelVisibleChange}> <Panel highPerformance={true}> <ListSelect {...this.state.data1} /> </Panel> <Panel> <LocationSelect {...this.state.data2} /> </Panel> <Panel displayMode={'Fullscreen'} // 配置 Panel 全屏展示，默认为下拉展示 animation={{ // 动画配置 timingFunction: 'cubic-bezier(0.22, 0.61, 0.36, 1)', duration: 200, direction: 'left', // 动画方向：从右往左方向滑出 }}> <MultiSelect {...this.state.data3} /> </Panel> </Filter>代码运行效果图如上截图。下面，简单说下代码的实现。
核心源码展示