React Native iOS：检查通知权限内存泄漏，如何在应用启动时检查通知权限？

Posted 2023-02-24

【中文标题】React Native iOS：检查通知权限内存泄漏，如何在应用启动时检查通知权限？

【英文标题】：React Native iOS: Check notifications perms memory leak, how to check notifications perms on app launch?

【发布时间】：2019-02-06 14:37:28

【问题描述】：

我希望能够在每次用户从任何状态打开应用程序时检查用户是否具有通知权限（如果应用程序之前从未打开过或应用程序在后台等） 我有什么现在正在通过渲染函数中的 PushNotificationios.checkPermissions 检查权限。但是，使用该方法会继续调用它并导致内存泄漏。我尝试的另一种方法是，每当用户想要收到通知（通过按下图标）时，都会调用 onPress 方法来检查权限，但这会导致用户按下图标两次以更新权限状态。

import 
    PushNotificationIOS,
    AsyncStorage,
    ..
   from "react-native";


export default class Bell extends React.Component 
  constructor(props) 
    super(props);  
    this.state = 
      isNotifActive: null,
      isBellActive: false,
      alertBody:"",
      fireDate: null,
      LaunchStatus: "",
      ID:'',
      timeSelected: ""
    ;
    this.accessKeyNotif = `$this.props.fireDate-isNotifActive`;

  

  componentDidMount = () =>
    this.setState(
        set props to state....
    );
    AsyncStorage.getItem(this.accessKeyNotif).then(value => this.setState( isNotifActive: JSON.parse(value) ));

  

  render() 
    PushNotificationIOS.checkPermissions((permissions) => 
      if (permissions.alert) 
        AsyncStorage.setItem(this.accessKeyNotif, JSON.stringify(true)).then(() => 
          this.setState( isNotifActive: true);

        );
      
      else
        AsyncStorage.setItem(this.accessKeyNotif, JSON.stringify(false)).then(() => 
          this.setState( isNotifActive: false);

        );
      
    ); 

     return (
      <Ionicons
        name=this.state.isBellActive? "md-notifications":"md-notifications-off"
        color="white"
        size=30
        style=styles.NotifIcon
        onPress=() => 
            if(this.state.isNotifActive)
             Make a notification
            
            else if(!this.state.isNotifActive)
               Cancel Notifications
              
            
        />

    );
    

Bell 组件被另一个类调用多次（20 次）以显示铃声。

【参考方案1】：

您不应该在 render 方法中执行该检查，因为每个 setState 都会导致重新渲染，这意味着多次不必要的重新渲染。最好使用AppState 监听器来处理这个问题。以下代码将在应用程序进入前台、进入后台时调用_handleAppStateChange。

你可以像这样从 react-native 导入它

import  AppState  from 'react-native'

然后在你的组件中

state = 
  appState: AppState.currentState,  // set the currentState as the appState
;


componentDidMount () 
  // Set the listener
  AppState.addEventListener('change', this._handleAppStateChange);


componentWillUnmount () 
  // remove the listener
  AppState.removeEventListener('change', this._handleAppStateChange);


_handleAppStateChange = (nextAppState) => 
  if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') 
    // app has come to the foreground
    // perform checks etc here
  
  // update the appState
  this.setState( appState: nextAppState );

您可以在此处阅读更多信息https://facebook.github.io/react-native/docs/appstate

【讨论】：

为了更好地理解这段代码。 this.state.appState.match(/inactive|background/) && nextAppState === 'active' ，检查以查看以前的 appState（例如它在后台）并通过 handleAppStateChange = (nextAppState) 检查当前状态是否处于活动状态？

是的，没错。我实际上是从我构建的应用程序中提取了这段代码。当应用程序进入前台时，我使用它来执行更新