Question

我是react-native的初学者，我需要根据每15秒从API检索一次的状态向用户发出警报。为此我在主要组件中使用react-native-background-timer来调用服务。但是当app在其他屏幕（组件）中时，即使服务在主组件中完美执行，它也不会根据收到的结果更新它的道具或状态（我想这应该是因为我在某些其他屏幕和主要组件的道具将不会更新）。由于如果app不在主要组件中，则不会触发警报

有人可以建议我采用这种方法吗？

    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

将通知代码移动到容器或根组件。这将确保即使用户离开主屏幕也会收到通知。

在react-native应用程序中使用全局警报

1 个答案: