react-native-beacons-manager在Android上的使用 --工作笔记-优快云博客

本文介绍了如何在React Native项目中使用react-native-beacons-manager库进行iBeacon扫描。在Android上，必须获取位置权限并正确配置AndroidManifest.xml文件，否则beacon搜索结果将为空。

github地址

npm install react-native-beacons-manager

import React, {Component} from 'react';
import {
  Text,
  View,
  DeviceEventEmitter,
  FlatList,
  StyleSheet,
  PermissionsAndroid,
  TouchableOpacity,
} from 'react-native';
import Beacons from 'react-native-beacons-manager';

export default class BeaconsManager extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // region information
      uuidRef: null,
      identifier: 'TEST BEACON 1',
      // React Native ListView datasource initialization
      dataSource: [],
    };

  componentWillMount() {
    // 告诉该库检测beacon
    Beacons.detectIBeacons();

    const {identifier, uuid} = this.state;
    const FBeacons = {identifier, uuid};
    Beacons.startRangingBeaconsInRegion(FBeacons)
      .then(() => console.log('Beacons ranging started succesfully')) //启用成功
      .catch(error =>
        console.log(`Beacons ranging not started, error: ${error}`), //启用失败
      );
  }
  componentDidMount() {
    // component state aware here - attach events
    //获取周围的beacon数据
    DeviceEventEmitter.addListener('beaconsDidRange', data => {
      var dataArr = [];
      dataArr = data.beacons; ///搜索到的beacons
      console.log(data.beacons);
      this.setState({
        dataSource: dataArr,
      });
    });
  }
  componentWillUnMount() {
    this.beaconsDidRange = null;
  }
  }
}

附完整demo代码

import React, {Component} from 'react';
import {
  Text,
  View,
  DeviceEventEmitter,
  FlatList,
  StyleSheet,
  PermissionsAndroid,
  TouchableOpacity,
} from 'react-native';
import Beacons from 'react-native-beacons-manager';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  btleConnectionStatus: {
    // fontSize: 20,
    paddingTop: 20,
  },
  headline: {
    fontSize: 20,
    paddingTop: 20,
  },
  row: {
    padding: 8,
    paddingBottom: 16,
  },
  smallText: {
    fontSize: 11,
  },
});

export default class BeaconsManager extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // region information
      uuidRef: null,
      identifier: 'TEST BEACON 1',
      // React Native ListView datasource initialization
      dataSource: [],
    };
  }
  async requestLocationPermission() {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          //第一次请求拒绝后提示用户你为什么要这个权限
          title: '我要地址查询权限',
          message: '没权限我不能工作，同意就好了',
        },
      );

      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('你已获取了地址查询权限');
      } else {
        console.log('获取地址查询失败');
      }
    } catch (err) {
      console.log(err.toString());
    }
  }

  componentWillMount() {
    // ONLY non component state aware here in componentWillMount
    Beacons.detectIBeacons();

    const {identifier, uuid} = this.state;
    const FBeacons = {identifier, uuid};
    Beacons.startRangingBeaconsInRegion(FBeacons)
      .then(() => console.log('Beacons ranging started succesfully'))
      .catch(error =>
        console.log(`Beacons ranging not started, error: ${error}`),
      );
  }
  componentDidMount() {
    // component state aware here - attach events
    //获取周围的beacon数据
    DeviceEventEmitter.addListener('beaconsDidRange', data => {
      var dataArr = [];
      dataArr = data.beacons;
      console.log(data.beacons);
      this.setState({
        dataSource: dataArr,
      });
    });
    // Beacons.stopRangingBeaconsInRegion('TEST BEACON 1');
  }
  componentWillUnMount() {
    this.beaconsDidRange = null;
  }

  renderItem = (item, index) => {
    const list = item.item;
    return (
      <View style={styles.row}>
        <Text style={styles.smallText}>
          UUID:{list.uuid ? list.uuid : 'NA'}
        </Text>
        <Text style={styles.smallText}>
          Major:{list.major ? list.major : 'NA'}
        </Text>
        <Text style={styles.smallText}>
          Minor:{list.minor ? list.minor : 'NA'}
        </Text>
        <Text>RSSI:{list.rssi ? list.rssi : 'NA'} </Text>
        <Text>Proximity: {list.proximity ? list.proximity : 'NA'}</Text>
        <Text>Distance: {list.distance ? list.distance : 'NA'}</Text>
      </View>
    );
  };
  render() {
    const {dataSource} = this.state;
    return (
      <View style={styles.container}>
        <Text style={styles.headline}>All beacons in the area</Text>
        <FlatList data={dataSource} renderItem={this.renderItem} />
        <TouchableOpacity
          style={styles.button_view}
          onPress={this.requestLocationPermission.bind(this)}>
          <Text>申请访问地址权限</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

上面的requestLocationPermission方法是获取地址查询权限，否侧搜索到的beacon数组会为空。
同时还得
在 android/app/src/main/AndroidMainfest.xml 添加

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
//在需要使用的组件中，引入PermissionsAndroid，

见

react-native-beacons-manager扫描beacons为空数组