src
├─ Filter.js    //Filter 最外层父容器
├─ constant.js  //项目代码常量定义
├─ index.js     //入口文件
├─ navbar       // navBar 文件夹
│    ├─ NavBase.js    //navBar 基类 NavQuickSearch 和 NavRelatePanel 父类
│    ├─ NavQuickSearch.js   // 快速搜索（无 panel）的 navBar
│    ├─ NavRelatePanel.js   // 带有 panel 的 navBar
│    └─ index.js  // 导出文件
├─ panel
│    └─ index.js  // panel 面板组件代码
└─ style.js

 import Filter from 'rax-pui-filter';render(<FilternavConfig={[]}onChange={()=>{}}><Filter.Panel><业务组件1 /></Filter.Panel><Filter.Panel><业务组件2 /></Filter.Panel></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: () => {// 渲染自定义的 UIreturn (<Imagestyle={{width: 120,height: 92,}}source={{ uri: 'https://gw.alicdn.com/tfs/TB1eubQakL0gK0jSZFAXXcA9pXa-60-45.png' }}/>);},},]// ...<FilteroffsetTop={100} // offsetTop = RecycleView上面的组件的高度，当前为 100navConfig={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><PaneldisplayMode={'Fullscreen'} // 配置 Panel 全屏展示，默认为下拉展示animation={{// 动画配置timingFunction: 'cubic-bezier(0.22, 0.61, 0.36, 1)',duration: 200,direction: 'left', // 动画方向：从右往左方向滑出}}><MultiSelect {...this.state.data3} /></Panel></Filter>

  render() {const { style = {}, styles = {}, navConfig, keepHighlight } = this.props;const { windowHeight, activeIndex } = this.state;if (!windowHeight) return null;return (<View style={[defaultStyle.container, styles.container, style]}>{this.renderPanels()}<Navbarref={r => {this.refNavbar = r;}}navConfig={navConfig}styles={styles}keepHighlight={keepHighlight}activeIndex={activeIndex}onNavbarPress={this.handleNavbarPress}onChange={this.handleSearchChange}/></View>);}

  /*** 渲染 Panel*/renderPanels = () => {const { activeIndex, windowHeight } = this.state;let { children } = this.props;if (!Array.isArray(children)) {children = [children];}let index = 0;return children.map(child => {let panelChild = null;let hasPanel = this.panelIndexes[index];if (!hasPanel) {index++;}if (!this.panelManager[index]) {this.panelManager[index] = {};}let injectProps = {index,visible: activeIndex === index,windowHeight,filterBarHeight: this.filterBarHeight,maxHeight: this.filterPanelMaxHeight,shouldInitialRender: this.panelManager[index].shouldInitialRender,onChange: this.handleSearchChange.bind(this, index),onNavTextChange: this.handleNavTextChange.bind(this, index),onHidePanel: this.setPanelVisible.bind(this, false, index),onMaskClick: this.handleMaskClick,disableNavbarClick: this.disableNavbarClick,};if (child.type !== Panel) {panelChild = <Panel {...injectProps}>{child}</Panel>;} else {panelChild = cloneElement(child, injectProps);}index++;return panelChild;});};

  return (<Viewref={r => {this.refPanelContainer = r;}}style={[defaultStyle.panel,styles.panel,this.panelContainerStyle,{transform: `translateX(-${this.containerTransformDes})`,opacity: 0,},]}><Viewref="mask"style={[defaultStyle.mask,styles.mask,showStyle,isWeb ? { top: 0, zIndex: -1 } : { top: 0 },]}onClick={this.handleMaskClick}onTouchMove={this.handleMaskTouchMove}/>{cloneElement(child, injectProps)}</View>);

export default function performance(Comp) {return class Performance extends Comp {static displayName = `Performance(${Comp.displayName})`;render() {const { shouldInitialRender } = this.props.panelAttributes;if (shouldInitialRender) {return super.render();} else {return <View />;}}};
}

  constructor(props) {super(props);const navConfig = formatNavConfig(props.navConfig);this.state = {navConfig,};}// 这里我们提供内部的 formatNavConfig 方法，具体内容根据不同组件业务需求不同代码逻辑不同，这里就不展开说明了

  //Filter.js 调用 NavBar 的方法/*** 更新 Navbar 文案*/handleNavTextChange = (index, navText, isChange = true) => {// Navbar 的 render 抽离到内部处理，可以减少一次 Filter.Panel 的额外 renderthis.asyncTask(() => {this.refNavbar.updateOptions(index, navText, isChange);});};//NavBar.js 提供给 Filter.js 调用的 updateOptions/*** 更新 navConfig，Filter 组件调用* 异步 setState 规避 rax 框架 bug: 用户在 componentDidMount 函数中调用中 this.props.onChange 回调* 重现Code：https://jsplayground.taobao.org/raxplayground/cefec50a-dfe5-4e77-a29a-af2bbfcfcda3* @param index* @param text* @param isChange*/updateOptions = (index, text, isChange = true) => {setTimeout(() => {const { navConfig } = this.state;this.setState({navConfig: navConfig.map((item, i) => {if (index === i) {return {...item,text,isChange,};}return item;}),});}, 0);};

  renderDefaultItem = ({ text, icons, active }) => {const { formatText, hasSeperator, length, keepHighlight, isChange } = this.props;const hasChange = keepHighlight && isChange;const iconWidth = icons ? this.getStyle('navIcon').width || 18 : 0;return [<TextnumberOfLines={1}style={[this.getStyle('navText'),ifElse(active || hasChange, this.getStyle('activeNavText')),{ maxWidth: 750 / length - iconWidth },]}>{ifElse(is('Function')(formatText), formatText(text), text)}</Text>,ifElse(icons,<Imageref={r => {this.refImg = r;}}style={this.getStyle('navIcon')}source={{uri: ifElse(active || hasChange, icons && icons.active, icons && icons.normal),}}/>,null,),ifElse(hasSeperator, <View style={this.navSeperatorStyle} />),];};

  export default class NavRelatePanel extends NavBase {static displayName = 'NavRelatePanel';handleClick = () => {const { disabled, onNavbarPress } = this.props;if (disabled) return false;onNavbarPress(NAV_TYPE.RelatePanel);};render() {const { renderItem, active, text, icons } = this.props;return (<Viewstyle={[this.getStyle('navItem'), ifElse(active, this.getStyle('activeNavItem'))]}onClick={this.handleClick}>{ifElse(is('Function')(renderItem),renderItem && renderItem({ active, instance: this }),this.renderDefaultItem({ text, icons, active }),)}</View>);}}

              <PaneldisplayMode={'Fullscreen'} // 配置 Panel 全屏展示，默认为下拉展示animation={{// 动画配置timingFunction: 'cubic-bezier(0.22, 0.61, 0.36, 1)',duration: 200,direction: 'left', // 动画方向：从右往左方向滑出}}><MultiSelect {...this.state.data3} /></Panel>

  get animationConfig() {const { animation } = this.props;if (!animation || !is('Object')(animation)) {return PANEL_ANIMATION_CONFIG;}return Object.assign({}, PANEL_ANIMATION_CONFIG, animation);}// ... /*** 执行动画* @param nextProps*/componentWillReceiveProps(nextProps) {if (nextProps.visible !== this.props.visible) {if (nextProps.visible) {setNativeProps(findDOMNode(this.refPanelContainer), {style: {transform: `translateX(-${rem2px(750)})`,},});this.props.disableNavbarClick(true);this.enterAnimate(this.currentChildref, () => {this.props.disableNavbarClick(false);});this.handleMaskAnimate(true);} else {this.handleMaskAnimate(false);this.props.disableNavbarClick(true);this.leaveAnimate(this.currentChildref, () => {this.props.disableNavbarClick(false);setNativeProps(findDOMNode(this.refPanelContainer), {style: {transform: 'translateX(0)',},});});}}}

      // 设置动画初始样式setTimeout(() => {setNativeProps(node, {style: {transform: !visible ? 'translate(0, 0)' : v,},});}, 0);// 执行动画setTimeout(() => {transition(node,{transform: visible ? 'translate(0, 0)' : v,},{timingFunction: timingFunction,duration: duration,delay: 0,},cb,);}, 50);

        setNativeProps(findDOMNode(this.refPanelContainer), {style: {opacity: 1,},});