npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-navigation-cus

v1.0.9

Published

react-native的导航组件,基于[email protected],修改而成.

Downloads

19

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;

我的博客