反應原生IosPushNotification錯誤

嗨即時嘗試建立與反應本地推送通知應用程序。所以我在頁面上做了他們所說的一切（https://facebook.github.io/react-native/docs/pushnotificationios.html#content）。但是當我複製頁面底部的示例並嘗試運行它時，出現以下錯誤：反應原生IosPushNotification錯誤

模塊AppRegistry不是註冊的可調用模塊。 error_img.png

這裏是我的index.ios.js：

'use strict'; 
var React = require('react'); 
var ReactNative = require('react-native'); 
var { 
    AlertIOS, 
    PushNotificationIOS, 
    StyleSheet, 
    Text, 
    TouchableHighlight, 
    View, 
} = ReactNative; 

class Button extends React.Component { 
    render() { 
    return (
     <TouchableHighlight 
     underlayColor={'white'} 
     style={styles.button} 
     onPress={this.props.onPress}> 
     <Text style={styles.buttonLabel}> 
      {this.props.label} 
     </Text> 
     </TouchableHighlight> 
    ); 
    } 
} 

class NotificationExample extends React.Component { 
    componentWillMount() { 
    // Add listener for push notifications 
    PushNotificationIOS.addEventListener('notification', this._onNotification); 
    // Add listener for local notifications 
    PushNotificationIOS.addEventListener('localNotification', this._onLocalNotification); 
    } 

    componentWillUnmount() { 
    // Remove listener for push notifications 
    PushNotificationIOS.removeEventListener('notification', this._onNotification); 
    // Remove listener for local notifications 
    PushNotificationIOS.removeEventListener('localNotification', this._onLocalNotification); 
    } 

    render() { 
    return (
     <View> 
     <Button 
      onPress={this._sendNotification} 
      label="Send fake notification" 
     /> 

     <Button 
      onPress={this._sendLocalNotification} 
      label="Send fake local notification" 
     /> 
     </View> 
    ); 
    } 

    _sendNotification() { 
    require('RCTDeviceEventEmitter').emit('remoteNotificationReceived', { 
     aps: { 
     alert: 'Sample notification', 
     badge: '+1', 
     sound: 'default', 
     category: 'REACT_NATIVE' 
     }, 
    }); 
    } 

    _sendLocalNotification() { 
    require('RCTDeviceEventEmitter').emit('localNotificationReceived', { 
     aps: { 
     alert: 'Sample local notification', 
     badge: '+1', 
     sound: 'default', 
     category: 'REACT_NATIVE' 
     }, 
    }); 
    } 

    _onNotification(notification) { 
    AlertIOS.alert(
     'Push Notification Received', 
     'Alert message: ' + notification.getMessage(), 
     [{ 
     text: 'Dismiss', 
     onPress: null, 
     }] 
    ); 
    } 

    _onLocalNotification(notification){ 
    AlertIOS.alert(
     'Local Notification Received', 
     'Alert message: ' + notification.getMessage(), 
     [{ 
     text: 'Dismiss', 
     onPress: null, 
     }] 
    ); 
    } 
} 

class NotificationPermissionExample extends React.Component { 
    state: any; 

    constructor(props) { 
    super(props); 
    this.state = {permissions: null}; 
    } 

    render() { 
    return (
     <View> 
     <Button 
      onPress={this._showPermissions.bind(this)} 
      label="Show enabled permissions" 
     /> 
     <Text> 
      {JSON.stringify(this.state.permissions)} 
     </Text> 
     </View> 
    ); 
    } 

    _showPermissions() { 
    PushNotificationIOS.checkPermissions((permissions) => { 
     this.setState({permissions}); 
    }); 
    } 
} 

var styles = StyleSheet.create({ 
    button: { 
    padding: 10, 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
    buttonLabel: { 
    color: 'blue', 
    }, 
}); 

exports.title = 'PushNotificationIOS'; 
exports.description = 'Apple PushNotification and badge value'; 
exports.examples = [ 
{ 
    title: 'Badge Number', 
    render(): ReactElement<any> { 
    PushNotificationIOS.requestPermissions(); 

    return (
     <View> 
     <Button 
      onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(42)} 
      label="Set app's icon badge to 42" 
     /> 
     <Button 
      onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(0)} 
      label="Clear app's icon badge" 
     /> 
     </View> 
    ); 
    }, 
}, 
{ 
    title: 'Push Notifications', 
    render(): ReactElement<any> { 
    return <NotificationExample />; 
    } 
}, 
{ 
    title: 'Notifications Permissions', 
    render(): ReactElement<any> { 
    return <NotificationPermissionExample />; 
    } 
}];

有沒有什麼辦法可以解決這個問題？謝謝。

--------------------已解決--------------------

I通過使用以下代碼更改index.ios.js來解決問題：

'use strict'; 
import React, { Component, } from 'react'; 

import { 
    AlertIOS, 
    PushNotificationIOS, 
    StyleSheet, 
    Text, 
    TouchableHighlight, 
    View, 
    AppRegistry 
} from 'react-native' 

class Button extends React.Component { 
    render() { 
    return (
     <TouchableHighlight 
     underlayColor={'white'} 
     style={styles.button} 
     onPress={this.props.onPress}> 
     <Text style={styles.buttonLabel}> 
      {this.props.label} 
     </Text> 
     </TouchableHighlight> 
    ); 
    } 
} 

class AwesomeProject extends React.Component { 
    componentWillMount() { 
    // Add listener for push notifications 
    PushNotificationIOS.addEventListener('notification', this._onNotification); 
    // Add listener for local notifications 
    PushNotificationIOS.addEventListener('localNotification', this._onLocalNotification); 
    } 

    componentWillUnmount() { 
    // Remove listener for push notifications 
    PushNotificationIOS.removeEventListener('notification', this._onNotification); 
    // Remove listener for local notifications 
    PushNotificationIOS.removeEventListener('localNotification', this._onLocalNotification); 
    } 

    render() { 
    return (
     <View> 
     <Button 
      onPress={this._sendNotification} 
      label="Send fake notification" 
     /> 

     <Button 
      onPress={this._sendLocalNotification} 
      label="Send fake local notification" 
     /> 
     </View> 
    ); 
    } 

    _sendNotification() { 
    require('RCTDeviceEventEmitter').emit('remoteNotificationReceived', { 
     aps: { 
     alert: 'Sample notification', 
     badge: '+1', 
     sound: 'default', 
     category: 'REACT_NATIVE' 
     }, 
    }); 
    } 

    _sendLocalNotification() { 
    require('RCTDeviceEventEmitter').emit('localNotificationReceived', { 
     aps: { 
     alert: 'Sample local notification', 
     badge: '+1', 
     sound: 'default', 
     category: 'REACT_NATIVE' 
     }, 
    }); 
    } 

    _onNotification(notification) { 
    AlertIOS.alert(
     'Push Notification Received', 
     'Alert message: ' + notification.getMessage(), 
     [{ 
     text: 'Dismiss', 
     onPress: null, 
     }] 
    ); 
    } 

    _onLocalNotification(notification){ 
    AlertIOS.alert(
     'Local Notification Received', 
     'Alert message: ' + notification.getMessage(), 
     [{ 
     text: 'Dismiss', 
     onPress: null, 
     }] 
    ); 
    } 
} 

class NotificationPermissionExample extends React.Component { 
    state: any; 

    constructor(props) { 
    super(props); 
    this.state = {permissions: null}; 
    } 

    render() { 
    return (
     <View> 
     <Button 
      onPress={this._showPermissions.bind(this)} 
      label="Show enabled permissions" 
     /> 
     <Text> 
      {JSON.stringify(this.state.permissions)} 
     </Text> 
     </View> 
    ); 
    } 

    _showPermissions() { 
    PushNotificationIOS.checkPermissions((permissions) => { 
     this.setState({permissions}); 
    }); 
    } 
} 

var styles = StyleSheet.create({ 
    button: { 
    padding: 10, 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
    buttonLabel: { 
    color: 'blue', 
    }, 
}); 

exports.title = 'PushNotificationIOS'; 
exports.description = 'Apple PushNotification and badge value'; 
exports.examples = [ 
{ 
    title: 'Badge Number', 
    render(): ReactElement<any> { 
    PushNotificationIOS.requestPermissions(); 

    return (
     <View> 
     <Button 
      onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(42)} 
      label="Set app's icon badge to 42" 
     /> 
     <Button 
      onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(0)} 
      label="Clear app's icon badge" 
     /> 
     </View> 
    ); 
    }, 
}, 
{ 
    title: 'Push Notifications', 
    render(): ReactElement<any> { 
    return <NotificationExample />; 
    } 
}, 
{ 
    title: 'Notifications Permissions', 
    render(): ReactElement<any> { 
    return <NotificationPermissionExample />; 
    } 
}]; 

AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);

來源

2016-09-08 Sergio González

您需要導入AppRegistry。

import { AppRegistry } from 'react-native';

或者

var { AlertIOS, PushNotificationIOS, StyleSheet, Text, TouchableHighlight, View, AppRegistry } = ReactNative;

來源

2016-09-10 23:37:18

反應原生IosPushNotification錯誤

回答

相關問題