react-native-navigation-cus
v1.0.9
Published
react-native的导航组件,基于[email protected],修改而成.
Downloads
14
Maintainers
Readme
react-native-navigation-cus
react-native的导航组件,基于[email protected],修改而成;<BR> 更好的页面导航封装,并且增加进入页面的方法回调(componentWillEnter)和退出页面的方法回调(componentWillExit) 完美的页面导航跳转返回; 每一个Tab页面组都有自己的返回逻辑,互不影响; 杜绝了传统的记住历史页面进行的返回; 避免从一个Tab页面组跳入到另一个Tab页面组,返回时返回到跳入之前的Tab页面组;
由于react-navigation在TabNavigator和DrawerNavigator下,页面打开过,就不更新了,也没有回调方法刷新页面,也无法准确返回页面,故再次修改封装此组件
安装组件:
npm i --save react-native-navigation-cus
使用 (此导航组件可查看react-navigation,或百度搜索react-navigation的使用与配置)
组件BaseComponent 方法参数请查看源文件里面有详细的注释,继承导航属性;这个组件中的方法都是"静态和动态"两种调用方式
this.goPage();//跳转页面
BaseComponent.goPage();//跳转页面
this.goBack();//返回已进入的页面
BaseComponent.goBack();//返回已进入的页面
this.setParams();//设置参数改变导航栏
BaseComponent.setParams();//设置参数改变导航栏
this.getPageParams();//获取页面跳转传递的参数
BaseComponent.getPageParams();//获取页面跳转传递的参数
/**
* 导航栏按钮设置
* headerLeft://导航栏左边按钮可传 bool(false:隐藏左边默认UI;true:显示左边默认UI)、图片(url)、UI
* headerRight://导航栏右边按钮可传 bool(false:隐藏左边默认UI;true:显示左边默认UI)、图片(url)、UI
* headerLeftHandle://函数方法 可在左边按钮点击返回之前执行
* headerRightHandle://函数方法 右边按钮点击执行
* **/
//还有很多react-navigation支持的参数都可通过此方法传递
this.setParams({
headerLeft:true,//导航栏左边按钮可传 bool(false:隐藏左边默认UI;true:显示左边默认UI)、图片(url)、UI
headerRight:true,//导航栏右边按钮可传 bool(false:隐藏左边默认UI;true:显示左边默认UI)、图片(url)、UI
headerLeftHandle:function(){},//函数方法 可在左边按钮点击返回之前执行
headerRightHandle:function() {}//函数方法 右边按钮点击执行
});//设置参数改变导航栏
//继承BaseComponent,将有两个生命周期回调方法
/**
* 进入页面时回调此方法
* @param params json,//第一个参数,页面传递参数
* @param action object,第二个参数,页面传递动作
* @param routeName string,第三个参数,页面名
* **/
componentWillEnter(params,action,routeName);//进入页面时回调此方法
componentWillExit();//退出页面时回调此方法
示例
import React, {Component} from 'react';
import StyleSheetAdapt from "react-native-stylesheet-adapt";
import {
BaseComponent,
StackNavigator,
TabNavigator,
CardStackStyleInterpolator
} from "react-native-navigation-cus";
import {
Text,
View,
Text,
TouchableOpacity,
} from 'react-native';
type Props = {};
export default class PageLogin extends BaseComponent<Props> {
constructor(props) {
super(props);
let param = Tools.userConfig.userCutAccount
&& Tools.userConfig.userCutAccount.length > 0
? {
headerLeft:<ImageChange icon={require("images/role.png")}
onPressIn={()=>PageSearchRole.show(this)}
style={styles.hLeft}/>
}
: {
headerLeft:false
};
this.setParams(param);
}
/**
* 进入页面时回调此方法
* @param params json,//第一个参数,页面传递参数
* @param action object,第二个参数,页面传递动作
* @param routeName string,第三个参数,页面名
* **/
componentWillEnter(params,action,routeName){
}//进入页面时回调此方法
componentWillExit(){
}//退出页面时回调此方法
render() {
return (
<View>
<BarcodeView ref={c=>this.barcodeView = c}
style={styles.testStyle}/>
<Text onPress={()=>this.barcodeView.startScan()}>
开始扫码
</Text>
<TouchableOpacity onPress={()=>this.goPage('PageMain')}>
<Text>
下一页
</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheetAdapt.create({
testStyle2:{
width:100,
height:200,
},
testStyle:{
transform:[
{rotateX:'180deg'}
],
},
});
const StackPages = {
PageLogin: {
screen: PageLogin,
navigationOptions:({navigation}) =>({
header:null,
})
},
PageMain: { screen: PageMain },
};
const App = StackNavigator(StackPages,{
// initialRouteName: 'PageTripDetail',
// headerMode:'none',
// backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页), none 为不跳转
navigationOptions:{
/*headerLeft:<Image source={require('./../res/images/leftWhite.png')}
style={styles.iconLeft}/>,*/
//header: null,//无导航条
//headerLeft:null,
gesturesEnabled:false,
headerStyle:{
backgroundColor: '#FF6B01',
//color:"#FFFFFF",
height:StyleSheetAdapt.getHeight(60),
},
headerTitleStyle:{
flex: 1,
textAlign: 'center',
fontSize:StyleSheetAdapt.getWidth(25),
},
//headerTitle:'首页',
headerBackTitleStyle:{
//color:"#FFFFFF",
/*width:40,
height:40,*/
},
headerTintColor:'#FFFFFF',
headerBackTitle:null,
// headerTitleStyle:{
// fontSize: StyleSheetAdapt.getWidth(25),
// },
},
mode:'none',
//headerMode:"float",
transitionConfig:()=>({
screenInterpolator:CardStackStyleInterpolator.forHorizontal,
}),
});
module.exports = App;