React native连续按两次退出app

代码（别忘记导入包）：

import React, { Component } from 'react';import {BackHandler, Platform, ToastAndroid} from 'react-native';
import { createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {Alert, Image, LogBox} from 'react-native';import HomeScreen from './home_page';
import WorkScreen from './work_page';
import FindScreen from './find_page';
import MineScreen from './mine_page';const Tab = createBottomTabNavigator();class MyTabs extends Component {render() {return (<Tab.Navigator// 图标切换screenOptions={({route}) => ({tabBarIcon: ({ focused, color, size }) => {let image;if(route.name === 'Home') {if (focused) {image = <Image source={require('../../img/select-home.png')} style={{width: 23, height: 23}}></Image>} else {image = <Image source={require('../../img/gray-home.png')} style={{width: 23, height: 23}}></Image>}} else if(route.name === 'Work'){if (focused) {image = <Image source={require('../../img/work-select.png')} style={{width: 23, height: 23}}></Image>} else {image = <Image source={require('../../img/work-normal.png')} style={{width: 23, height: 23}}></Image>}} else if(route.name === 'Find'){if (focused) {image = <Image source={require('../../img/resource-select.png')} style={{width: 23, height: 23}}></Image>} else {image = <Image source={require('../../img/resource-normal.png')} style={{width: 23, height: 23}}></Image>}} else if(route.name === 'Mine'){if (focused) {image = <Image source={require('../../img/mine-select.png')} style={{width: 23, height: 23}}></Image>} else {image = <Image source={require('../../img/mine-normal.png')} style={{width: 23, height: 23}}></Image>}}return image;}})}// 底部文字切换颜色tabBarOptions={{activeTintColor: 'tomato',inactiveTintColor: 'gray',}}><Tab.Screen name="Home" component={HomeScreen} /><Tab.Screen name="Work" component={WorkScreen} /><Tab.Screen name="Find" component={FindScreen} /><Tab.Screen name="Mine" component={MineScreen} /></Tab.Navigator>);}componentDidMount() {if (Platform.OS === 'android'){BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);}}componentWillUnmount() {if (Platform.OS === 'android') {BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);}}onBackAndroid = () => {//禁用返回键if(this.props.navigation.isFocused()) {//判断   该页面是否处于聚焦状态if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {//最近2秒内按过back键，可以退出应用。// return false;BackHandler.exitApp();//直接退出APP}else{this.lastBackPressed = Date.now();ToastAndroid.show('再按一次退出应用', 1000);//提示return true;}}}}export default module = MyTabs;

React native连续按两次退出app相关推荐

React Native 实战：构建电商 App
课程介绍 React Native 充分利用了 Facebook 的现有轮子,是一个很优秀的集成作品,使用 RN 即可做到无需编译就能远程热更新 App,再加上友好的开发方式.快到爆炸的开发效率.RN ...
React Native+Node.js 开发的课程表app项目笔记
在做项目之前,首先要把React Native 的环境搭建好,这里我就不多做阐述,RN中文网步骤说的挺清楚的,就跟着配置就好. http://reactnative.cn/docs/0.... 一.总 ...
React Native开发的博客园App
利用React Native花了大概3周的业余时间开发出这一款较完善博客园App,目前只是测试版本(v1.0.0),不过大致的功能都已经完善,如果大家有兴趣有问题可以下面反馈安卓: 请前往酷安ht ...
React Native零基础+React Native重入门到精通+混合APP完整版
第1章介绍课程目标和学习内容包括课程概述.课程安排.学习前提.讲授方式等方面的介绍,最后演示了整个招聘App的功能,让同学们对课程项目有一个直观的了解. 1-1 课程导学第2章知识储备 2-1 ...
开发 React Native APP —— 从改造官方Demo开始（二）
经过第一部分开发 React Native APP -- 从改造官方 Demo 开始(一)介绍,App 框架基本构建完成,这部分主要讨论 UI/交互.App 发布前的准备工作及如何发布,具体内容包括: ...
React Native制作仿美团APP总结
最近学习了一个网上的React Native项目,利用React Native制作一个类似于美团的App,项目属于对之前React Native常用组件的基本使用,但是仍有一些关键点值得记录.最后做成 ...
快速创建React Native App
告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了. 快速创建React Native App 查看最新的React Native ...
React Native动画入门全解析
动画 React Native 提供了两个互补的动画系统: 用于创建精细的交互控制动画Animated 用于全局的布局动画LayoutAnimation Animated Animated通过 **. ...
React Native开发之必备React基础
为了帮助大家快速上手React Native开发,在这本节中将向大家介绍开发React Native所需要的一些React必备基础知识. 概述本节课将从React的特点.如何使用React.JSX语 ...
构建了我的第一个React Native应用程序之后，我现在确信这是未来。
by Taylor Milliman 泰勒·米利曼(Taylor Milliman) 构建了我的第一个React Native应用程序之后,我现在确信这是未来. (After building my ...

React native连续按两次退出app

React native连续按两次退出app相关推荐

最新文章

热门文章