Estimote的RN包装器(react-native-proximity)无法检测到信标

时间:2018-10-20 09:51:56

标签: react-native estimote android-ibeacon

我用 react-native init 创建了一个RN项目。该应用程序尝试检测标记为“日本”的iBeacon,但从未成功。但是,同一部Android手机中的官方Estimote App可以检测到“日本” iBeacon并在其屏幕上显示。

App.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import * as RNEP from '@estimote/react-native-proximity'

// Candy: 46925e7c3ebf3dfaae9495f5ea6bfe2e: B9407F30-F5F8-466E-AFF9-25556B57FE6D:4678:20750
// Lemon: 558a35bbe5f247c3006a29a0c9f45d0e: B9407F30-F5F8-466E-AFF9-25556B57FE6D:46147:28807
// Beetroor: d7bc54ba83cf9ea68344860e5c91eb1c: B9407F30-F5F8-466E-AFF9-25556B57FE6D:30635:42073

// this will trigger a popup with "allow this app to access your location?"

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};

const zone1 = new RNEP.ProximityZone(5, "japan");
zone1.onEnterAction = context => {
  // context properties are:
  // - attachments: all the key-value attachments assigned in Estimote Cloud to the beacon that triggered the action
  // - tag: the tag used when defining the zone, repeated here for convenience
  // - deviceIdentifier: Estimote-specific device identifier of the beacon that triggered the action
  console.log("zone1 onEnter finally", context);
};
zone1.onExitAction = context => {
  console.log("zone1 onExit", context);
};
zone1.onChangeAction = contexts => {
  // onChange event gives you granular data about which exact beacons are in range
  //
  // imagine there are 2 beacons tagged "lobby", to help cover the entire lobby area; here's an example sequence of events:
  //
  // 1. when you enter the range of the 1st one, you'll get:
  // lobby onEnter
  // lobby onChange with array [beacon1's context]
  //
  // 2. when you enter the range of the 2nd one, and are still in range of the 1st one:
  // lobby onChange with array [beacon1's context, beacon2's context]
  //
  // 3. when you exit the range of the 1st one, but are still in range of the 2nd one:
  // lobby onChange with array [beacon2's context]
  //
  // 4. when you finally exit the range of the 2nd one:
  // lobby onChange with empty array []
  // lobby onExit
  console.log("zone1 onChange", contexts);
};

const zone2 = new RNEP.ProximityZone(5, "france");
zone2.onEnterAction = context => {
  console.log("zone2 onEnter", context);
};
zone2.onExitAction = context => {
  console.log("zone2 onExit", context);
};
zone2.onChangeAction = contexts => {
  console.log("zone2 onChange", contexts);
};

export default class App extends Component<Props> {

  render() {

    RNEP.locationPermission.request().then(
      permission => {
        // `permission` will be one of RNEP.locationPermission.DENIED, .ALWAYS, or .WHEN_IN_USE
        console.log(`location permissionnnnnnnnnnn: ${permission}`);

        if (permission !== RNEP.locationPermission.DENIED) {
          // generate Estimote Cloud credentials for your app at:
          // https://cloud.estimote.com/#/apps/add/your-own-app
          const credentials = new RNEP.CloudCredentials(
            "bigrichman-m6c",
            "9fcb4ff6f246eb087698eda0b4edce0a"
          );
          console.log('#87');
          const config = {
            // modern versions of Android require a notification informing the user that the app is active in the background
            // if you don't need proximity observation to work in the background, you can omit the entire `notification` config
            //
            // see also: "Background support" section in the README
            notification: {
              title: "Exploration mode is on",
              text: "We'll notify you when you're next to something interesting.",
              //icon: 'my_drawable', // if omitted, will default to the app icon (i.e., mipmap/ic_launcher)

              // in apps targeting Android API 26, notifications must specify a channel
              // https://developer.android.com/guide/topics/ui/notifiers/notifications#ManageChannels
              channel: {
                id: "exploration-mode",
                name: "Exploration Mode"
              }
            }
          };

          RNEP.proximityObserver.initialize(credentials, config);
          RNEP.proximityObserver.startObservingZones([zone1, zone2]);
          console.log('#109');
        }
      },
      error => {
        console.error("Error when trying to obtain location permission", error);
      }
    );

    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>XXX Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

另请参见以下版本信息:

"dependencies": {
    "@estimote/react-native-proximity": "^0.4.1",
    "react": "16.6.0-alpha.8af6728",
    "react-native": "0.57.3"
  },

输出如下:

location permissionnnnnnnnnnn: always
#87
#109

0 个答案:

没有答案