응답 네이티브 앱 전체에서 글로벌 알림 사용

Question

저는 반응식 초보자이며 매 15 초마다 API에서 검색 될 상태를 기반으로 사용자에게 경고해야합니다. 이를 위해 내 주요 구성 요소에 반응 기본 배경 타이머를 사용하여 서비스를 호출합니다. 하지만 응용 프로그램이 다른 화면 (구성 요소)에있는 경우에도 서비스가 주 구성 요소에서 완벽하게 실행 되더라도 수신 된 결과에 따라 해당 소품이나 상태가 업데이트되지 않습니다. 다른 화면과 주요 구성 요소의 소품은 업데이트되지 않습니다). 앱이 기본 구성 요소에 없으면 경고가 표시되지 않습니다.

누구든지 나에게이 방법을 제안 할 수 있습니까?

class Home extends Component{ 

    constructor(props){ 
     super(props) 
     this._onPopUpShowed = this._onPopUpShowed.bind(this) 
    } 

    componentDidMount(){ 
     //Initial call after the launch 
     this.props.fetchLiveOrderData() 

     //Start timer for polling 
     const intervalId = BackgroundTimer.setInterval(() => { 
      isBackgroudLoad=true 
      this.props.fetchLiveOrderData() 
     }, 1000*15); 
    } 


    render(){ 

     const{payload,isFetching,isError,isSuccess} = this.props.liveOrderData 
     return(
      //Render UI depending on the data fetched 
     ); 
    } 

} 

//map state to props 
const mapStateToProps = state => { 
    return { 
     liveOrderData: state.liveOrderData 
    } 
} 

//map dispatch to props 
const mapDispatchToProps = dispatch => { 
    return { 
     fetchLiveOrderData :() => dispatch(fetchLiveOrderData()) 
    } 
} 


export default connect(mapStateToProps, mapDispatchToProps) (Home) 

liveOrderReducer.js

import { 
    FETCHING_LIVE_ORDER_DATA, FETCHING_LIVE_ORDER_DATA_SUCCESS, FETCHING_LIVE_ORDER_DATA_ERROR 
} from '../constants' 

const initialState = { 
    payload: [], 
    msg:[], 
    isFetching: true, 
    isError: false, 
    isSuccess: false 
} 

export default liveOrderReducer = (state = initialState, action) => { 
    switch(action.type){ 
     case FETCHING_LIVE_ORDER_DATA : 
      return { 
       ...state, 
       payload: [], 
       msg:[], 
       isFetching: true, 
       isError: false, 
       isSuccess: false 
      } 
     case FETCHING_LIVE_ORDER_DATA_SUCCESS : 
      return { 
       ...state, 
       payload: action.data, 
       msg:[], 
       isFetching: false, 
       isError: false, 
       isSuccess:true 
      } 
     case FETCHING_LIVE_ORDER_DATA_ERROR : 
      return { 
       ...state, 
       payload: [], 
       msg:action.msg, 
       isFetching: false, 
       isError: true, 
       isSuccess:false 
      } 
     default: 
      return state 
    } 
} 

하는 index.js

import { 
    FETCHING_LIVE_ORDER_DATA, FETCHING_LIVE_ORDER_DATA_SUCCESS, FETCHING_LIVE_ORDER_DATA_ERROR 
} from '../constants' 
import api from '../lib/api' 

export const getLiveOrderData =() => { 
    return { 
     type : FETCHING_LIVE_ORDER_DATA 
    } 
} 

export const getLiveOrderDataSuccess = data => { 
    return { 
     type : FETCHING_LIVE_ORDER_DATA_SUCCESS, 
     data 
    } 
} 

export const getLiveOrderDataFailure =() => { 
    return { 
     type : FETCHING_LIVE_ORDER_DATA_ERROR 
    } 
} 

export const fetchLiveOrderData =() => { 
    return(dispatch) => { 
     dispatch(getLiveOrderData()) 
     api.getOrder().then(resp => { 
      dispatch(getLiveOrderDataSuccess(resp)) 
     }).catch((err) => { 
      dispatch(getLiveOrderDataFailure(err)) 
     }) 
    } 
} 

Answer 1

은 용기 또는 루트 구성 요소에 알림 코드를 이동

. 이렇게하면 사용자가 홈 화면에서 벗어난 경우에도 알림을받을 수 있습니다.