使用react-native-maps在地图上绘制标记

时间:2018-08-29 10:12:48

标签: javascript react-native react-redux redux-thunk react-native-maps

简而言之,我正在尝试使用react-native-maps在地图上绘制标记。

我所做的只是创建一个动作来从服务器获取坐标和相应的ID(请参见下面的代码)。

systemctl restart smb nmb

我不知道我是否使用了正确的单词,但实际上我已经使用componentWillMount()测试了代码(上面),并且成功地将多个坐标作为对象数组返回。

现在,问题是我不知道下一步该怎么做。据我了解,我知道最终目标是创建一个setState()。但是我不知道怎么到达那里。

如果有人可以将我指向正确的方向,将会有很大的帮助。

1 个答案:

答案 0 :(得分:0)

您需要创建一个异步操作。您可以根据内部异步函数是已解析还是被拒绝来在异步动作内分派不同的动作。

export function getPlacesOnMap(token) {
    return async function(dispatch) {
        dispatch({
            type: "FETCHING_PLACES_PENDING"
        });
        fetch("myApp?auth=" + token)
        .then(res => {
            dispatch({
                type: "FETCHING_PLACES_FULFILLED",
                payload: res.json()
            });
        })
        .catch(error => {
            dispatch({
                type: "FETCHING_PLACES_REJECTED",
                payload: error
            });
        });
    };
}

如果您的authGetToken()函数也是一个承诺,则需要在authGetToken()解决后分派此操作。 您可以在减速器的“ FETCHING_PLACES_FULFILLED”案例中使用action.payload来使用检索到的数据。

更新

您的减速器应该是这样的:

export default function reducer(
    state = {
        loadingMarkers : false,
        markers : [],
        error : null,
    },
    action
) {
    switch (action.type) {
        case "FETCHING_PLACES_PENDING":
            return { ...state, loadingMarkers: true };
        case "FETCHING_PLACES_FULFILLED":
            return { ...state, loadingMarkers: false, markers: action.payload};
        case "FETCHING_PLACES_REJECTED":
            return { ...state, loadingMarkers: false, error: action.payload };
        default:
            return state;
    }
}

现在,您可以将组件连接到redux,并在提取标记时使用它们。

看看this exampleconnect docs