我用 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