reactjs 如何弹出警报,直到用户在设备上的位置在React Native

nxagd54h  于 2023-02-22  发布在  React
关注(0)|答案(1)|浏览(101)

位置访问是目前我正在建设的应用程序所需要的。我已经开发了一个警报显示在位置上时,用户没有在位置上。我的代码正确运行时,我去的页面。但弹出警报消息不显示时,我去设置页面,并回到上一页没有在位置上。我怎么能显示警报消息,直到用户在位置上?这是我的代码。

componentDidMount() {
    ScaleModule.initBluetoothManager();
    // this.optionsDropDown.show()
    this.setState({
      netQuantity: this.props.route.params.data.quantity,
      // noOfPackages: this.props.route.params.noOfPackages,
      // packageList: this.props.route.params.packageList
    });
    // this.getList()
    // console.log(this.props.user)
    // this.groupBy()
    Geolocation.getCurrentPosition(
        (position) => {
          console.log('Location services are enabled.',position);
        },
        (error) => {
          switch (error.code) {
            case 1:
              console.log('Location services are disabled.');
              this.showLocationAlert();
              break;
            case 2:
              console.log('Network connection is unavailable.');
              this.showLocationAlert();
              break;
            case 3:
              console.log('Location request timed out.');
              this.showLocationAlert();
              break;
            default:
              console.log('An unknown error occurred.');
              this.showLocationAlert();
          }
        },
        { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 },
      );
  }
  
  showLocationAlert = () => {
    Alert.alert(
      'Location Required',
      'Please enable location services to continue.',
      [
        {text: 'Open Settings', onPress: () => DeviceSettings.open()},
      ]
    );
  };
ogq8wdun

ogq8wdun1#

componentDidMount生命周期方法仅在装入组件时调用一次。因此,如果用户转到设置页并返回到上一页而未启用位置,则不会再次调用componentDidMount方法来显示警报。
为了连续检查用户是否已启用定位并显示警报直到用户启用定位为止,您可以使用Geolocation API中的watchPosition函数代替getCurrentPositionwatchPosition函数将持续监控用户的位置,并在位置发生变化时调用回调函数。您可以使用此回调函数检查用户是否启用了定位,如果没有,则显示警报。

componentDidMount() {
  ScaleModule.initBluetoothManager();
  this.setState({
    netQuantity: this.props.route.params.data.quantity,
  });
  
  this.watchId = Geolocation.watchPosition(
    (position) => {
      console.log('Location services are enabled.', position);
    },
    (error) => {
      switch (error.code) {
        case 1:
          console.log('Location services are disabled.');
          this.showLocationAlert();
          break;
        case 2:
          console.log('Network connection is unavailable.');
          this.showLocationAlert();
          break;
        case 3:
          console.log('Location request timed out.');
          this.showLocationAlert();
          break;
        default:
          console.log('An unknown error occurred.');
          this.showLocationAlert();
      }
    },
    { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
  );
}

componentWillUnmount() {
  Geolocation.clearWatch(this.watchId);
}

showLocationAlert = () => {
  Alert.alert(
    'Location Required',
    'Please enable',
    [
      {text: 'Open Settings', onPress: () => DeviceSettings.open()},
    ]
  )
}

参考链接:https://github.com/michalchudziak/react-native-geolocation#watchposition

相关问题