react native监听物理返回键和沉浸式状态栏

绝地灬酷狼 2021-09-17 03:14 615阅读 0赞

监听物理返回键：

首先定义全局参数：
    
    var lastBackPressed;
    
    var current = true;
    
    
    
    在reactnative中引入BackHandler
    
    import { BackHandler, ToastAndroid , StatusBar} from 'react-native';
    
    
    
    然后在componentWillMount里面添加
    
    componentWillMount(){
    
    //绑定监听事件
    
    BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
    
    }
    
    
    
    componentWillUnmount() {
    
    //去除事件
    
    BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
    
    }
    
    //定义返回事件
    
    onBackAndroid =()=> {
    
    if (current == true) {//如果是在首页
    
        if( lastBackPressed && lastBackPressed + 2000 >= Date.now() ){
    
            //在2秒内按过back返回，可以退出应用
    
                BackHander.exitApp();
    
                return false;
    
               }
    
        
    
    lastBackPressed = Date.now();
    
    ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);
    
    return true;
    
         }else{
    
            
    
    if (this.props && this.props.navigation) {
    
    //返回上一级（非首页）
    
    this.props.navigator.pop();
    
            }
    
        }
    
    }

最后在Navigators中添加

<Navigators
    
                onNavigationStateChange={(prevState, newState, action) => {//注册路由改变监听事件
    
                                if (newState && newState.routes[newState.routes.length - 1].routeName == 'Tab') {//Tab是底部导航
    
                                    //如果当前路由是Home页面，则需要处理安卓物理返回按键。
    
                                      current = true;
    
                               } else {
    
                                      current = false;
    
                           }
    
                   }}
    
    />

沉浸式状态栏的实现

在render中加上

return (<React.Fragment>
    
              <StatusBar backgroundColor={'transparent'} translucent={true}/>
    
               <Navigators 
    
                onNavigationStateChange={(prevState, newState, action) => {//注册路由改变监听事件
    
                         if (newState && newState.routes[newState.routes.length - 1].routeName == 'Tab') {
    
                        //如果当前路由是Home页面，则需要处理安卓物理返回按键。
    
                                      current = true;
    
                          } else {
    
                                      current = false;
    
                        }
    
                  }}  />
    
    </React.Fragment>)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk3NTQ3_size_16_color_FFFFFF_t_70][]

实例：

/**
    
    * Sample React Native App
    
    * https://github.com/facebook/react-native
    
    * @flow
    
    */
    
    
    
    import React, { Component } from 'react';
    
    import HomeScreen from './Component/HomeScreen';
    
    import ToastExample from './Component/menu';
    
    import Newticket from './Component/newticket';
    
    import Login from './Component/login';
    
    import Tdetail from './Component/TicketDetail';
    
    import Litile from './Component/litile';
    
    import WaitPlan from './Component/waitPlan';
    
    import CorrelationPlan from './Component/correlationPlan';
    
    import HistoryPlan from './Component/historyPlan';
    
    import MySorage from './api/storage';
    
    import TicketModel from './Component/TicketModel';
    
    import TicketFlew from './Component/TicketFlew';
    
    import Result from './Component/Result';
    
    import {StackNavigator,TabBarTop, TabNavigator,StackActions, NavigationActions} from "react-navigation";
    
    import {Image,BackHandler,ToastAndroid,StatusBar,Easing,Animated,Alert} from 'react-native';
    
    import {islogin} from './api/api'
    
    MySorage._getStorage()
    
    window.jconfig={
    
    userinfo:{},
    
    usermsg:{}
    
    }
    
    const resetAction = StackActions.reset({
    
    index: 0,
    
    actions: [NavigationActions.navigate({ routeName: 'login' })],
    
    });
    
    var lastBackPressed;
    
    var current = true;
    
    console.disableYellowBox = true;
    
    const TabRouteConfigs = { // 表示各个页面路由配置,让导航器知道需要导航的路由对应的页�?
    
    Home: { // 路由名称
    
    screen: HomeScreen, // 对应的路由页�?
    
    navigationOptions: ({ navigation }) => ({
    
    tabBarLabel: '管理',
    
    tabBarIcon: ({ focused }) => (
    
    <Image resizeMode = 'contain' source = { focused ? require('./images/whome.png') : require('./images/home.png') } style = { { width: 25, height: 25 } }
    
    />
    
    )
    
    }),
    
    },
    
    ToastExample: {
    
    screen: ToastExample,
    
    navigationOptions: { // 指定路由页面的配置选项
    
    tabBarLabel: '我的', // 可用作头部标�?headerTitle ，或者Tab标题 tabBarLabel
    
    tabBarIcon: ({ focused }) => (
    
    <Image resizeMode = 'contain' source = { focused ? require('./images/wmy.png') : require('./images/my.png') } style = { { width: 25, height: 25 } }
    
    />
    
    )
    
    },
    
    },
    
    
    
    };
    
    const TabNavigatorConfigs = {
    
    initialRouteName: 'Home', // 初始显示的Tab对应的页面路由名�?
    
    tabBarComponent: TabBarTop, // Tab选项卡组件，�?TabBarBottom �?TabBarTop 两个值，在iOS中默认为 TabBarBottom ，在Android中默认为 TabBarTop �?
    
    tabBarPosition: 'bottom', // 设置选项卡的位置，在顶部或是底部，有'top'�?bottom'可�?
    
    lazy: true, // 是否懒加载页�?
    
    header:null,
    
    tabBarOptions: {
    
    indicatorStyle:{backgroundColor:'white'},
    
    activeTintColor: "white",
    
    inactiveTintColor: "white",
    
    style: {
    
    backgroundColor: '#0b1b34',
    
    height:60,
    
    },
    
    labelStyle: {fontSize: 10, marginTop:10},
    
    IconStyle: {margin: 0},
    
    showIcon: true,
    
    pressOpacity: 1,
    
    tabStyle: {
    
    }
    
    } // 在属性TabBarBottom与TabBarTop中有所不同
    
    };
    
    const Tab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);
    
    
    
    const StackRouteConfigs={
    
    Tab: {
    
    screen: Tab,
    
    },
    
    litile:{
    
    screen: Litile,
    
    path:'app/litile',
    
    header: null,
    
    navigationOptions: {
    
    header: null,
    
    gesturesEnabled: true
    
    }
    
    },
    
    waitPlan:{
    
    screen: WaitPlan,
    
    path:'app/waitPlan',
    
    header: null,
    
    navigationOptions: {
    
    header: null,
    
    gesturesEnabled: true
    
    }
    
    },
    
    correlationPlan:{
    
    screen: CorrelationPlan,
    
    path:'app/correlationPlan',
    
    header: null,
    
    navigationOptions: {
    
    header: null,
    
    gesturesEnabled: true
    
    }
    
    },
    
    historyPlan:{
    
    screen: HistoryPlan,
    
    path:'app/historyPlan',
    
    header: null,
    
    navigationOptions: {
    
    header: null,
    
    gesturesEnabled: true
    
    }
    
    },
    
    newticket:{
    
    screen: Newticket,
    
    path:'app/newticket',
    
    header: null,
    
    navigationOptions: {
    
    header: null,
    
    gesturesEnabled: true
    
    }
    
    },
    
    TicketDetail:{
    
    screen:Tdetail,
    
    path:'app/TicketDetail',
    
    header:null,
    
    navigationOptions: {
    
    header: null,
    
    gesturesEnabled: true
    
    }
    
    },
    
    Result:{
    
    screen:Result,
    
    path:'app/Result',
    
    header:null,
    
    navigationOptions: {
    
    header: null,
    
    gesturesEnabled: true
    
    }
    
    },
    
    login:{
    
    screen:Login,
    
    path:'app/login',
    
    header:null,
    
    navigationOptions: {
    
    header: null,
    
    gesturesEnabled: true
    
    }
    
    },
    
    TicketModel:{
    
    screen:TicketModel,
    
    path:'app/TicketModel',
    
    header:null,
    
    navigationOptions: {
    
    header: null,
    
    gesturesEnabled: true
    
    }
    
    },
    
    TicketFlew:{
    
    screen:TicketFlew,
    
    path:'app/TicketFlew',
    
    header:null,
    
    navigationOptions: {
    
    header: null,
    
    gesturesEnabled: true
    
    }
    
    }
    
    };
    
    
    
    const StackNavigatorConfigs={
    
    initialRouteName:'Tab',
    
    headerMode:'none',
    
    transitionConfig: () => ({
    
    transitionSpec: {
    
    duration: 300,
    
    easing: Easing.out(Easing.poly(4)),
    
    timing: Animated.timing,
    
    },
    
    screenInterpolator: sceneProps => {
    
    const {layout, position, scene} = sceneProps;
    
    const {index} = scene;
    
    const Width = layout.initWidth;
    
    //沿X轴平移
    
    const translateX = position.interpolate({
    
    inputRange: [index - 1, index, index + 1],
    
    outputRange: [Width, 0, -(Width - 10)],
    
    });
    
    //透明度
    
    const opacity = position.interpolate({
    
    inputRange: [index - 1, index - 0.99, index],
    
    outputRange: [0, 1, 1],
    
    });
    
    return {opacity, transform: [{translateX}]};
    
    }
    
    })
    
    };
    
    
    
    const Navigators = StackNavigator(StackRouteConfigs,StackNavigatorConfigs);
    
    
    
    
    
    export default class App extends Component {
    
    
    
    async componentDidMount () {
    
    await this.getUserInfo()
    
    }
    
    
    
    async componentWillMount(){
    
    let d="?code=50ACD07A6C49F3B9E082EF40461AC6D1";
    
    let isloging = await islogin(d);
    
    if(isloging.form.status==0){
    
    Alert.alert(
    
    "登录超时",
    
    "登录状态已过期，请重新登录",
    
    [
    
    {text: '去登陆', onPress: () => this.navigator.dispatch(resetAction)},
    
    ],
    
    {cancelable:false}
    
    )
    
    }
    
    BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
    
    }
    
    
    
    
    
    componentWillUnmount() {
    
    BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
    
    }
    
    onBackAndroid = () => {
    
    if (current == true) {//如果是在首页
    
    if (lastBackPressed && lastBackPressed + 2000 >= Date.now()) {
    
    //最近2秒内按过back键，可以退出应用。
    
    BackHandler.exitApp();
    
    return false;
    
    }
    
    
    
    lastBackPressed = Date.now();
    
    ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);
    
    return true;
    
    } else {
    
    if (this.props && this.props.navigation) {
    
    this.props.navigator.pop();
    
    }
    
    }
    
    }
    
    
    
    async getUserInfo () {
    
    try {
    
    return new Promise((s1, s2) => {
    
    MySorage._load("userinfo", (res) => {
    
    let info = JSON.parse(res);
    
    if(!info){
    
    this.navigator.dispatch(resetAction);
    
    return
    
    }
    
    window.jconfig.userinfo=info;
    
    })
    
    })
    
    }
    
    catch(e){
    
    return
    
    }
    
    }
    
    
    
    render() {
    
    return (<React.Fragment>
    
    <StatusBar backgroundColor={'transparent'} translucent={true}/>
    
    <Navigators ref={(nav)=>{
    
    this.navigator = nav;
    
    }} configureScene={(route) => {
    
    // return Navigator.SceneConfigs.VerticalDownSwipeJump; // 底部弹出
    
    }}
    
    onNavigationStateChange={(prevState, newState, action) => {//注册路由改变监听事件
    
    if (newState && newState.routes[newState.routes.length - 1].routeName == 'Tab') {//如果当前路由是Home页面，则需要处理安卓物理返回按键。
    
    current = true;
    
    } else {
    
    current = false;
    
    }
    
    }}
    
    renderScene={(route, navigator) => {
    
    let Component = route.component;
    
    Component.navigator = navigator;
    
    if (route.component) {
    
    return <Component {...route.params} navigator={navigator}/>
    
    }
    
    }}
    
    />
    
        </React.Fragment>);
    
    }
    
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk3NTQ3_size_16_color_FFFFFF_t_70]: /images/20210908/13589beb7d5a414089462a1f765eac41.png