当应用程序未使用或处于后台模式时,React Native 是否具有生命周期为 运行 的功能?
Does react native have a function lifecycle is running when app is not use or in background mode?
当应用程序未使用或处于后台模式时,React Native 是否具有生命周期为 运行 的函数?
我需要一个函数生命周期,当用户不使用应用程序或应用程序处于后台模式时,react-native 正在运行。我想检查数据库以获取通知 componentDidMount 正在工作,但用户必须打开应用程序并再次关闭它
我需要一个功能或生命周期始终有效
这是我的通知代码:
import React, { Component } from 'react';
import { View, NetInfo, Image, AppState, DeviceEventEmitter } from 'react-native';
import { Container, Text } from 'native-base';
import { RootNavigator } from './src/root';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import resducers from './src/reducers/index';
import PushController from'./PushController';
import PushNotification from 'react-native-push-notification';
import PushNotificationAndroid from 'react-native-push-notification';
const store = createStore(resducers);
export default class App extends Component<Props> {
constructor(Props){
super(Props);
this.state={
connection:null,
}
this.handleAppStateChange = this.handleAppStateChange.bind(this);
this.sendNotification = this.sendNotification.bind(this);
}
componentDidMount(){
AppState.addEventListener('change',this.handleAppStateChange);
}
componentWillMount(){
NetInfo.isConnected.addEventListener("connectionChange",this.handleConnectionChange);
NetInfo.isConnected.fetch().done((isConnected)=>this.setState({connection:isConnected}));
PushNotificationAndroid.registerNotificationActions(['Accept','Reject','Yes','No']);
DeviceEventEmitter.addListener('notificationActionReceived', function(e){
console.log ('notificationActionReceived event received: ' + e);
const info = JSON.parse(e.dataJSON);
if (info.action == 'Yes') {
alert('Accept');
} else if (info.action == 'No') {
alert('Reject')
}
// Add all the required actions handlers
});
}
componentWillUnMount(){
NetInfo.isConnected.removeEventListener("connectionChange",this.handleConnectionChange);
AppState.removeEventListener('change',this.handleAppStateChange);
}
handleConnectionChange=(isConnected)=>{
this.setState({connection:isConnected});
}
handleAppStateChange(appState){
if(appState==='background'){
PushNotification.localNotificationSchedule({
message:'Scheduled notification delay message',
date:new Date(Date.now()+(2000))
})
}
}
sendNotification(){
PushNotification.localNotification({
message:'You Pushed the notification button',
title:'My Notification Title',
ongoing:true,
vibrate:true,
playSound:true,
actions:'["Yes","No"]',
color:'red'
})
}
handeView(){
if(this.state.connection!==null && this.state.connection){
return <RootNavigator />
}else {
return <View style={{flex:1, alignItems:"center", justifyContent:"center"}}>
<Image source={require("./images/connection.gif")} style={{height: 150, width: 150, resizeMode : "stretch"}}/>
<Text style={{ fontFamily:"IRANSans", fontSize:18, textAlign:"center", color:"#b0b5bb" }}>لطفا اتصال اینترنت خود را بررسی کنید ...</Text>
</View>
}
}
render() {
return (
<Provider store={store}>
<Container>
{this.handeView()}
{this.sendNotification()}
</Container>
</Provider>
);
}
}
正如@dentemm 提到的,这需要在本机代码中 运行 因此您可以尝试使用此模块 https://github.com/jamesisaac/react-native-background-task
注意: 对于通知,我们通常使用外部服务向用户推送通知,例如 Firebase、Amazone SNS 或 Google Cloud Messages,通知将到达用户即使您的应用程序完全关闭,因为 OS 将处理通知并打开您的应用程序,并且 运行 当用户单击它时为您提供一个功能,有关更多详细信息,您可以查看本教程 https://medium.com/differential/how-to-setup-push-notifications-in-react-native-ios-android-30ea0131355e
当应用程序未使用或处于后台模式时,React Native 是否具有生命周期为 运行 的函数?
我需要一个函数生命周期,当用户不使用应用程序或应用程序处于后台模式时,react-native 正在运行。我想检查数据库以获取通知 componentDidMount 正在工作,但用户必须打开应用程序并再次关闭它
我需要一个功能或生命周期始终有效
这是我的通知代码:
import React, { Component } from 'react';
import { View, NetInfo, Image, AppState, DeviceEventEmitter } from 'react-native';
import { Container, Text } from 'native-base';
import { RootNavigator } from './src/root';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import resducers from './src/reducers/index';
import PushController from'./PushController';
import PushNotification from 'react-native-push-notification';
import PushNotificationAndroid from 'react-native-push-notification';
const store = createStore(resducers);
export default class App extends Component<Props> {
constructor(Props){
super(Props);
this.state={
connection:null,
}
this.handleAppStateChange = this.handleAppStateChange.bind(this);
this.sendNotification = this.sendNotification.bind(this);
}
componentDidMount(){
AppState.addEventListener('change',this.handleAppStateChange);
}
componentWillMount(){
NetInfo.isConnected.addEventListener("connectionChange",this.handleConnectionChange);
NetInfo.isConnected.fetch().done((isConnected)=>this.setState({connection:isConnected}));
PushNotificationAndroid.registerNotificationActions(['Accept','Reject','Yes','No']);
DeviceEventEmitter.addListener('notificationActionReceived', function(e){
console.log ('notificationActionReceived event received: ' + e);
const info = JSON.parse(e.dataJSON);
if (info.action == 'Yes') {
alert('Accept');
} else if (info.action == 'No') {
alert('Reject')
}
// Add all the required actions handlers
});
}
componentWillUnMount(){
NetInfo.isConnected.removeEventListener("connectionChange",this.handleConnectionChange);
AppState.removeEventListener('change',this.handleAppStateChange);
}
handleConnectionChange=(isConnected)=>{
this.setState({connection:isConnected});
}
handleAppStateChange(appState){
if(appState==='background'){
PushNotification.localNotificationSchedule({
message:'Scheduled notification delay message',
date:new Date(Date.now()+(2000))
})
}
}
sendNotification(){
PushNotification.localNotification({
message:'You Pushed the notification button',
title:'My Notification Title',
ongoing:true,
vibrate:true,
playSound:true,
actions:'["Yes","No"]',
color:'red'
})
}
handeView(){
if(this.state.connection!==null && this.state.connection){
return <RootNavigator />
}else {
return <View style={{flex:1, alignItems:"center", justifyContent:"center"}}>
<Image source={require("./images/connection.gif")} style={{height: 150, width: 150, resizeMode : "stretch"}}/>
<Text style={{ fontFamily:"IRANSans", fontSize:18, textAlign:"center", color:"#b0b5bb" }}>لطفا اتصال اینترنت خود را بررسی کنید ...</Text>
</View>
}
}
render() {
return (
<Provider store={store}>
<Container>
{this.handeView()}
{this.sendNotification()}
</Container>
</Provider>
);
}
}
正如@dentemm 提到的,这需要在本机代码中 运行 因此您可以尝试使用此模块 https://github.com/jamesisaac/react-native-background-task
注意: 对于通知,我们通常使用外部服务向用户推送通知,例如 Firebase、Amazone SNS 或 Google Cloud Messages,通知将到达用户即使您的应用程序完全关闭,因为 OS 将处理通知并打开您的应用程序,并且 运行 当用户单击它时为您提供一个功能,有关更多详细信息,您可以查看本教程 https://medium.com/differential/how-to-setup-push-notifications-in-react-native-ios-android-30ea0131355e