React-native设置全局函数globle【适用于有组件嵌套时】

APP的首页App.js里，根据logFlag的值来判断渲染的内容是登录页面还是首页：

以前的逻辑是在MyInfo.js文件里的注销按钮里设置isLogin为false，然后跳转到App.js，App.js判断isLogin为false，设置this.state.logFlag为false，然后渲染出组件，即显示出了登录界面。

但是问题出现了，当在登录界面登录成功后，默认的逻辑是跳转到App.js界面，然后App.js判断已经登陆，然后渲染出TabBar，TabBar加载Task组件，这时会显示2层TabBar。
原因是App.js渲染出了TabBar，TabBar加载了Task，但是实际上整个页面还是在App组件里，所以我们从App组件跳转到了App组件，这样以前的底部栏不会消失，所以会出现2个。

解决方案：

设置一个全局的登出函数：

在其他页面比如MyInfo.js里的登出逻辑里，直接调用logOut();然后就可以重新设置state，然后渲染原来的APP.js，而不是渲染新的APP.js。

React-native设置全局函数globle【适用于有组件嵌套时】相关推荐

React Native 设置RGBA背景色
React Native 设置RGBA背景色: 可以先用Mac自带吸色工具,获取RGB值,然后设置背景如下:backgroundColor: 'rgba(52, 52, 52, 0.8)',透明度值也 ...
React Native之箭头函数和延展操作符（...）
箭头函数在我们学习React Native的过程中,我们经常会遇到"=>"这样形式的书写,如下: import React, {Component} from 'react ...
在C++工程中设置全局函数
在头文件中对该函数进行全局函数的声明: extern void Test(); 在cpp文件中进行函数的定义: void Test() {MessageBox(NULL,L"调用了C++的全 ...
React Native封装Toast与加载Loading组件
React Native开发封装Toast与加载Loading组件在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...
React Native入门（七）之列表组件的使用(2)关于FlatList的一切
前言在上一篇博客中了解了列表组件的相关内容,主要是静态的展示了一个列表数据,了解了ScrollVIew,FlatList和SectionList的基本用法,本篇文章就深入的了解一个常用的一个列表组件 ...
beeshell —— 开源的 React Native 组件库
背景 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
React Native 二常用组件与开源组件
2019独角兽企业重金招聘Python工程师标准>>> #0.手把手教React Native实战之开山篇##作者简介东方耀 Android开发RN技术 facebookgithub ...
React Native 移动开发入门与实战
课程简介本课程主要讲解 React 的基础知识及应用案例,包括 props.state.生命周期函数等,样式和 Flex 布局,React Native 内置的 API 和 UI 组件介绍.路由.状 ...
开发 React Native APP —— 从改造官方Demo开始（二）
经过第一部分开发 React Native APP -- 从改造官方 Demo 开始(一)介绍,App 框架基本构建完成,这部分主要讨论 UI/交互.App 发布前的准备工作及如何发布,具体内容包括: ...
React Native入门基础使用总结
1.router: react-native-router-flux 基于react-navigation/native 二次封装 2.字体图标:react-native-vector-icons(推 ...

React-native设置全局函数globle【适用于有组件嵌套时】

React-native设置全局函数globle【适用于有组件嵌套时】相关推荐

最新文章

热门文章