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

Question

我希望能够在每次用户从任何状态打开应用程序时检查用户是否具有通知权限（如果应用程序之前从未打开过或应用程序在后台等） 我有什么现在正在通过渲染函数中的 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 次）以显示铃声。

Answer 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