react-native-navigation-cus
react-native的导航组件,基于react-navigation@1.5.11,修改而成;<BR>
更好的页面导航封装,并且增加进入页面的方法回调(componentWillEnter)和退出页面的方法回调(componentWillExit)
完美的页面导航跳转返回;
每一个Tab页面组都有自己的返回逻辑,互不影响;
杜绝了传统的记住历史页面进行的返回;
避免从一个Tab页面组跳入到另一个Tab页面组,返回时返回到跳入之前的Tab页面组;
由于react-navigation在TabNavigator和DrawerNavigator下,页面打开过,就不更新了,也没有回调方法刷新页面,也无法准确返回页面,故再次修改封装此组件
安装组件:
npm i --save react-native-navigation-cus
react-navigation,或百度搜索react-navigation的使用与配置)
使用 (此导航组件可查看组件BaseComponent 方法参数请查看源文件里面有详细的注释,继承导航属性;这个组件中的方法都是"静态和动态"两种调用方式
this;//跳转页面BaseComponent;//跳转页面this;//返回已进入的页面BaseComponent;//返回已进入的页面this;//设置参数改变导航栏BaseComponent;//设置参数改变导航栏this;//获取页面跳转传递的参数BaseComponent;//获取页面跳转传递的参数 /** * 导航栏按钮设置 * headerLeft://导航栏左边按钮可传 bool(false:隐藏左边默认UI;true:显示左边默认UI)、图片(url)、UI * headerRight://导航栏右边按钮可传 bool(false:隐藏左边默认UI;true:显示左边默认UI)、图片(url)、UI * headerLeftHandle://函数方法 可在左边按钮点击返回之前执行 * headerRightHandle://函数方法 右边按钮点击执行 * **/ //还有很多react-navigation支持的参数都可通过此方法传递this;//设置参数改变导航栏 //继承BaseComponent,将有两个生命周期回调方法/*** 进入页面时回调此方法* @param params json,//第一个参数,页面传递参数* @param action object,第二个参数,页面传递动作* @param routeName string,第三个参数,页面名* **/;//进入页面时回调此方法;//退出页面时回调此方法
示例
;;;; type Props = {};<Props> { superprops; let param = ToolsuserConfiguserCutAccount && ToolsuserConfiguserCutAccountlength > 0 ? headerLeft:<ImageChange icon= onPressIn=PageSearchRole style=styleshLeft/> : headerLeft:false ; this; } /** * 进入页面时回调此方法 * @param params json,//第一个参数,页面传递参数 * @param action object,第二个参数,页面传递动作 * @param routeName string,第三个参数,页面名 * **/ { }//进入页面时回调此方法 { }//退出页面时回调此方法 { return <View> <BarcodeView ref=thisbarcodeView = c style=stylestestStyle/> <Text onPress=thisbarcodeView> 开始扫码 </Text> <TouchableOpacity onPress=this> <Text> 下一页 </Text> </TouchableOpacity> </View> ; } const styles = StyleSheetAdapt; const StackPages = PageLogin: screen: PageLogin header:null PageMain: screen: PageMain ; const App = ; moduleexports = App;