反応ネイティブアプリ全体でグローバルアラートを使用

Question

私は反応ネイティブの初心者であり、15秒ごとにAPIから取得されるステータスに基づいてユーザーに警告する必要があります。このために、サービスを呼び出すために私の主なコンポーネントにreact-native-background-timerを使用しています。しかし、アプリケーションが他の画面（コンポーネント）にあっても、サービスがメインコンポーネントで完璧に実行されても、受信した結果に応じてアプリケーションのステータスやステータスは更新されません（これは私が他の画面とメインコンポーネントの小道具は更新されません）。アプリがメインコンポーネントにない場合、警告が表示されない

誰も私にこのアプローチを提案できますか？

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

コンテナまたはルートコンポーネントに通知コードを移動

。これにより、ユーザーがホーム画面から離れても通知を受け取ることができます。