react-navigation 监听顶部导航栏点击/滑动状态

时间: 2019-03-13阅读: 248标签: react

问题描述:

使用createMaterialTopTabNavigator创建顶部导航栏,希望实现切换到指定的Tab再获取数据,查看官方文档只能找到tabBarOnPress 方法监听点击回调,但是无法监听滑动切换 

 

import React from 'react';
import {DeviceEventEmitter,View} from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';

export default class TestPage extends React.Component{
    constructor(props) {
            super(props);
            this.topTabList = ['All','Java', 'Javascript', 'PHP'];
           
    }
    _getTopBar() {
            let topBars = {}
            this.topTabList.forEach((item, index) => {
                topBars['TopBar_' + item] = {
                    screen: (props)=><ChildComponent {...props} tabName={item} InitTabName={this.topTabList[0]}/>,
                    navigationOptions: {
                        title: item,
                    }
                }
            })
            return topBars
    }
    getTopTabList(){
            if(!this.createTopNavigator){
                this.createTopNavigator = createMaterialTopTabNavigator(
                    this._getTopBar(),
                    {
                          //code...
                    }
                );
            }
            return this.createTopNavigator;
    }
        

    render(){
        const TopTabList = this.getTopTabList();
        // 在导航栏组件render位置使用onNavigationStateChange方法监听顶部导航切换-可监听滑动+点击
        return <View>
            <TopTabList
                onNavigationStateChange={(prevState, currentState)=>{
                     let {index} = currentState;
                     let TabName = currentState.routes[index].routeName;
                     TabName = TabName.split('_')[1];
                    //触发事件监听器,更新列表数据
                    //tip:如果希望切换已经加载过一次之后不重新获取数据,可以通过setParams设一个flag,判断flag是否需要触发监听器
                     DeviceEventEmitter.emit('TabChange',TabName);  
                }}
            />
        </View>
    }
}


class ChildComponent extends React.Component{
    constructor(props){
        super(props);
        this.tabName= this.props.tabName; //当前tabName
        this.InitTabName = this.props.InitTabName; //初始化列表
    }
    componentWillMount(){
         // 加载初始化Tab列表
            if(this.storeName===this.InitTabName){
                this.updateList();
            }
        // 监听Tab切换
            this.TopBarChangeListener = DeviceEventEmitter.addListener('TabChange',tabName=>{
                if(this.tabName===tabName){
                    //***更新列表***
                    this.updateList();
                }
            })
    }
    // 更新列表
    updateList(){
        let {navigation} = this.props;
        navigation.setParams({hasList:true});
        this.loadData(); 
    }
    loadData(){
        //***Send Request***
    }
    componentWillUnmount(){
        //移除事件监听器
        if(this.TopBarChangeListener){
                this.TopBarChangeListener.remove();
            }
        }
    }
    render(){
        return <View>
            {/* code... */}
        </View>
    }
}


为什么说React 16是开发者的福音?

就像人们对更新移动应用程序和操作系统感到兴奋一样,开发人员也应该对更新框架感到兴奋。不同框架的新版本具有新特性和开箱即用的技巧。下面是将现有应用程序从 React 15 迁移到 React 16 时应该考虑的一些好特性。

React ref

React ref理解:通过指定ref获得你想操作的元素,然后进行修改.是当组件挂载后和卸载后,以及ref属性本身发生变化时,回调函数就会被调用。 因为ref引用的是组件的实例

函数式的React

React 是现在最流行的 JavaScript 库之一。使用 React 可以非常轻松地创建 Web 用户交互界面。 它的成功有很多因素,但也许其中一个因素是清晰有效的编程方法。在 React 的世界中,UI 是由一个一个组件所组成的。

react hook超实用的用法和技巧分析

react hook发布也已经有几个月了,相信有部分人已经开始使用了,还有些人在犹豫要不要用,可能更多人安于现状,没有要用的打算,甚至还有很多公司的react版本是15或以下的,迫于升级的难度没有使用。以我个人的观点,要不要使用react hook呢?

react中PureComponent浅对比策略

PureComponent实现了Component中没有实现的shouComponentUpdata()方法,会对state和props进行一次浅对比,本文介绍一下浅对比策略,源码中,实现浅对比的函数是:shallowEqual()

如何扩展 Create React App 的 Webpack 配置

Create React App(以下简称 CRA)是创建 React 应用的一个脚手架,它与其他脚手架不同的一个地方就是将一些复杂工具(比如 webpack)的配置封装了起来,让使用者不用关心这些工具的具体配置,从而降低了工具的使用难度。

渐进式React

可以说 React 为Web开发者带来了全新的开发模式,而在各类新功能下,如何达到性能最优仍是我们需要关心的。今天做一次精读尝试,原文地址在文末,话不多说,先呈上一份性能清单:

必须要会的 50 个React 面试题

如果你是一位有抱负的前端程序员并准备面试,那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完美指南。JavaScript 工具缓慢而稳定地在市场中扎根,对 React 的需求呈指数级增长。选择合适的技术来开发应用或网站变得越来越有挑战性

解决vscode 开发react 导入绝对路径 无法跳转的问题

相对路径可正常跳转,但是在webpack配置alias使用绝对路径后无法跳转.解决办法:需要添加一个jsconfig文件,如下:

react 源码之setState

与multirepo 相对。 monorepo是单代码仓库, 是把所有相关项目都集中在一个代码仓库中,每个module独立发布,每个module都有自己的依赖项(package.json),能够作为独立的npm package发布,只是源码放在一起维护。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全