react-native检查并提示用户启用网络/ GPS

时间:2017-01-22 20:47:04

标签: react-native

我正在考虑如何在我的应用程序启动时检查设备上是否启用了网络或GPS。如果它们被禁用,则提示用户启用它。

这在React-native中是否可行?是否有任何类或工具可以帮助这种类型的对话?

3 个答案:

答案 0 :(得分:16)

所以我将开始回答我自己的问题。

对于GPS:

似乎有一个明智的解决方案。如果存在地理定位请求,IOS似乎本地请求。对于Android,这不是原生支持,但有人为此创建了一个模块(https://github.com/webyonet/react-native-android-location-services-dialog-box

所以在我的动作创建者中我添加了下一个代码:

if(Platform.OS === 'android')
LocationServicesDialogBox.checkLocationServicesIsEnabled({ 
                message: "<h2>Use Location?</h2> \
                            This app wants to change your device settings:<br/><br/>\
                            Use GPS for location<br/><br/>", 
                ok: "YES", 
                cancel: "NO" 
            }).then(() => { 
                locationTracking(dispatch, getState, geolocationSettings)
            })

对于网络: 没有原生支持,所以我最终做自己的动作创建者来检查。

export function networkCheck(){
  return (dispatch) => {
    const dispatchNetworkState = (isConnected) => dispatch({
      type: types.NETWORK_STATE,
      state: isConnected
    })
    const handle = () => NetInfo.isConnected.fetch().done(dispatchNetworkState)
    NetInfo.isConnected.addEventListener('change', handle);
  }
}

多一点:

对于GPS,我添加了这个以检查用户是否在任务中间去禁用GPS。

export function locationCheck(geolocationSettings = {enableHighAccuracy: true, timeout: 20000, maximumAge: 10000, distanceFilter:10}){
  return (dispatch) => {
    navigator.geolocation.watchPosition(
        () => {
            dispatch({
                type: types.LOCATION_STATE,
                state: true
            })
        },
        () => {
            dispatch({
                type: types.LOCATION_STATE,
                state: false
            })
        },
        geolocationSettings)
  }
}

答案 1 :(得分:5)

要在Android上启用位置信息/ GPS,我可以推荐以下模块:https://github.com/Richou/react-native-android-location-enabler

它使用标准Android对话框进行定位: enter image description here

答案 2 :(得分:0)

在最新版本的iOS(&gt; = iOS8?)和Android中,您可以显示应用权限对话框,并允许用户打开/关闭相机和位置等权限。有一个本机模块可以做到这一点:https://github.com/yonahforst/react-native-permissions