Question

目前我正在使用此反应本机推送通知

，并以在Android中最小化我的应用程序时创建本地通知的时间表通知为例。

我的问题是，我实现了这些代码

constructor(){
    super();

    this.handleAppStateChange = this.handleAppStateChange.bind(this);
    this.state = {
      seconds: 10
  };
}

componentDidMount(){
    AppState.addEventListener('change', this.handleAppStateChange);
    this.getTitles();
}

componentWillUnmount(){
  AppState.removeEventListener('change', this.handleAppStateChange);
}

handleAppStateChange(appState){
  if(appState === 'background'){
       PushNotification.localNotificationSchedule({
      message: "SUMMER SALE IS ON!", 
      date: new Date(Date.now() + (this.state.seconds * 1000)) // in 60 secs
    });
  }
}

我在home.js中实现了这些代码，其中home.js基本上是我的带有搜索栏的主页。问题是，当我搜索某些内容并从home.js提交到searchResult.js（通过react导航传递数据）时，通知也会在searchResult.js页面上触发。

本应最小化我的应用程序。如何防止通知在searchResult.js中触发？

编辑：这是我当前的App.js，我不确定如何在此处实施通知

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);


import store from './store'; //Import the store

import Home from './components/home' //Import the component file
import Cart from './components/cart';
import SearchResults from './components/searchResults';

export default class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <Root />
            </Provider>
        );
    }
}

const homeStack = createStackNavigator({
  Home: { 
    screen: Home, 
    navigationOptions:{
         title: "test",
       headerStyle: {
          backgroundColor: '#4050B5',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
          fontWeight: 'bold'
      }
    }
  },
   SearchResults: { 
    screen: SearchResults, 
    navigationOptions:{
         title: "Search Results",
       headerStyle: {
          backgroundColor: '#4050B5',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
          fontWeight: 'bold'
      }
    }
  }
})

const cartStack = createStackNavigator({
 Cart: {  
    screen: Cart, 
    navigationOptions:{
       title: "Shopping Cart",
     headerStyle: {
        backgroundColor: '#4050B5',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
        fontWeight: 'bold'
    }
    }
  },
})

const Root = createBottomTabNavigator({
  Home: homeStack,   
  Cart: cartStack
},    
{ 
  initialRouteName : "Home", 
},
{
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `user${focused ? '' : '-outline'}`;
        } else if (routeName === 'Cart') {
          iconName = `cart${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        //return <EvilIcons name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    }
}
);

Answer 1

首先，优良作法是在可能的最高级别（App.js）处理应用程序状态更改。其次，handleAppStateChange获取 next 应用程序状态作为其参数，因此，为了更好地控制，我认为您应该将当前的appState存储在组件状态中，然后检查以确保状态更改为与当前状态。因此，您的听众可能看起来像handleAppStateChange(nextAppState)，而其中的条件可能是if (this.state.appState === 'inactive' && nextAppState === 'background') 那么不要忘记在听众末尾setState({appState: nextAppState})。我认为那应该可以解决您的问题，但是如果不能让我知道。

响应本机通知问题，可能使用背景和导航问题

1 个答案: