Noncommital Premarital Mischief

npm

Join us for the upcoming webinar, "Enterprise JavaScript done right: the tools you love, the security you need."Sign up here »

react-native-navigation-cus

1.0.9 • Public • Published

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.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;
 

我的博客

install

npm i react-native-navigation-cus

Downloadsweekly downloads

0

version

1.0.9

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability