【水滴石穿】react-native-ble-demo

項目的話，是想打開藍牙，然后連接設備

點擊已經連接的設備，我們會看到一些設備

不過我這邊在開啟藍牙的時候報錯了

先放作者的項目地址：
https://github.com/hezhii/react-native-ble-demo
然后我們來分析代碼
根入口文件是

//react-native-ble-demo/ble_central/index.js
import { AppRegistry } from 'react-native'

import App from './src/App'
import { name as appName } from './app.json'

console.disableYellowBox = true

AppRegistry.registerComponent(appName, () => App)

//react-native-ble-demo/ble_central/src/App.js
import React from 'react'
import { Provider } from 'react-redux'
import { Provider as AntProvider } from '@ant-design/react-native'
//store 普通的store封裝
import store from './store/configureStore'
//跳轉
import Navigator from './navigator'

export default class App extends React.PureComponent {
  render() {
    return (
      <Provider store={store}>
        <AntProvider>
          <Navigator />
        </AntProvider>
      </Provider>
    )
  }
}

//react-native-ble-demo/ble_central/src/navigator.js
import React from 'react'
import { createAppContainer, createStackNavigator } from 'react-navigation'
//
import Device from './pages/Device'
import Search from './pages/Search'
import Service from './pages/Service'
import Characteristic from './pages/Characteristic'
import Operation from './pages/Operation'
//這個有意思，這種返回
const AppNavigator = createStackNavigator({
  Search,
  Device,
  Service,
  Characteristic,
  Operation
}, {
    defaultNavigationOptions: {
      headerTitleStyle: {
        fontSize: 18,
      },
      headerBackTitle: '返回',
    },
  })

export default createAppContainer(AppNavigator)

//react-native-ble-demo/ble_central/src/pages/Device.js
import React from 'react'
import { StyleSheet, View, Text, FlatList } from 'react-native'
import { SafeAreaView } from 'react-navigation'
import { connect } from 'react-redux'

import DeviceList from '../components/DeviceList'

@connect(({ connectedDevice }) => ({
  devices: connectedDevice.list
}))
export default class Device extends React.PureComponent {
  static navigationOptions = {
    title: '已連接的設備'
  }

  onPressDevice = (item) => {
    const { navigation } = this.props
    navigation.push('Service', { device: item })
  }

  render() {
    const { devices } = this.props;
    return (
      <SafeAreaView style={styles.container}>
        <DeviceList data={devices} onPress={this.onPressDevice} />
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})

//react-native-ble-demo/ble_central/src/pages/Search.js
import React from 'react'
import {
  StyleSheet,
  View,
  ActivityIndicator,
  Text,
  TouchableOpacity,
  Alert,
  Platform
} from 'react-native'
import { BleManager } from 'react-native-ble-plx'
import { SafeAreaView } from 'react-navigation'
import { connect } from 'react-redux'
import HeaderButtons, { Item } from 'react-navigation-header-buttons'
import { Toast, Portal } from '@ant-design/react-native'

import Button from '../components/Button'
import DeviceList from '../components/DeviceList'
import { ADD_DEVICE } from '../reducer/connectedDevice'

@connect(({ connectedDevice }) => ({
  connectedDevices: connectedDevice.list
}))
export default class Search extends React.PureComponent {
  static navigationOptions = ({ navigation }) => ({
    title: '搜索設備',
    headerRight: (
      <HeaderButtons>
        <Item
          title="已連接的設備"
          buttonStyle={{ color: '#1890ff', fontSize: 16 }}
          onPress={() => navigation.push('Device')}
        />
      </HeaderButtons>
    ),
  })

  constructor(props) {
    super(props)

    this.state = {
      bleState: null,
      scanning: false,
      devices: []
    }
    this._initBleManager()
  }

  componentWillUnmount() {
    this.bleManager.destroy()
  }

  _initBleManager() {
    const manager = this.bleManager = new BleManager()

    manager.onStateChange(this.onStateChange)
    this._checkState()
  }

  _checkState = () => {
    this.bleManager.state()
      .then(state => {
        console.log('檢查藍牙狀態：', state)
        this.setState({
          bleState: state
        })
        if (state === 'PoweredOff') {
          this._showAlert()
        }
      })
  }

  _showAlert() {
    Alert.alert(
      '藍牙未開啟',
      '需要您開啟藍牙才能使用后續功能',
      [
        { text: '取消' },
        { text: '開啟藍牙', onPress: this._onOpenBluetooth }
      ]
    )
  }

  _onOpenBluetooth = () => {
    if (Platform.OS === 'ios') {
      Linking.openURL('App-Prefs:root=Bluetooth')
    } else {
      this.bleManager.enable()
    }
  }

  // 藍牙狀態發生變化
  onStateChange = (state) => {
    console.log('藍牙狀態發生變化，新的狀態為：', state)
    this.setState({
      bleState: state
    })
    if (state === 'PoweredOff') {
      this._showAlert()
    }
  }

  // 搜索到設備
  onScannedDevice = (err, device) => {
    const { devices } = this.state
    if (devices.findIndex(item => item.id === device.id) < 0) {
      this.setState({
        devices: [...devices, device]
      })
    }
  }

  // 搜索設備
  scanDevices = () => {
    const { bleState } = this.state
    if (bleState === 'PoweredOn') {
      console.log('開始搜索設備')
      this.setState({ scanning: true, devices: [] })
      this.bleManager.startDeviceScan(null, { allowDuplicates: false }, this.onScannedDevice)
    } else {
      this._showAlert()
    }
  }

  // 停止搜索設備
  stopScan = () => {
    if (this.state.scanning) {
      console.log('停止搜索設備')
      this.setState({ scanning: false })
      this.bleManager.stopDeviceScan()
    }
  }

  clearDevices = () => {
    this.setState({
      devices: []
    })
  }

  connectDevice = async (device) => {
    const { connectedDevices, dispatch, navigation } = this.props
    const index = connectedDevices.findIndex(item => item.id === device.id)
    if (index >= 0) {
      Alert.alert('已經連接該設備了')
      return
    }
    this.stopScan() // 連接時停止掃描
    const key = Toast.loading('正在連接設備...')
    await device.connect()
    console.log('成功連接設備：', device.id)
    await device.discoverAllServicesAndCharacteristics()
    console.log('獲取設備的服務和特征')
    Portal.remove(key)
    dispatch({
      type: ADD_DEVICE,
      payload: device
    })
    Alert.alert('成功連接設備', null, [
      { text: '算了' },
      { text: '去看看', onPress: () => navigation.push('Device') }
    ])
  }
//渲染設備列表
  renderDevice = ({ item }) => {
    return (
      <TouchableOpacity onPress={() => this.connectDevice(item)}>
        <View style={styles.listItem}>
          <Text style={styles.itemId}>{item.id}</Text>
          <Text style={styles.itemName}>{item.localName || item.name}</Text>
        </View>
      </TouchableOpacity>
    )
  }

  render() {
    const { scanning, devices } = this.state
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.header}>
          <Button
            style={{ marginRight: 16 }}
            onPress={this.scanDevices}
            disabled={scanning}
          >{scanning ? '正在搜索' : '開始搜索'}</Button>
          <Button
            onPress={this.stopScan}
            disabled={!scanning}
          >停止搜索</Button>
        </View>
        <View style={styles.listHeader}>
          <View style={styles.row}>
            <Text style={styles.headerTitle}>可用設備</Text>
            {scanning && <ActivityIndicator />}
          </View>
          <TouchableOpacity onPress={this.clearDevices}>
            <Text>清空</Text>
          </TouchableOpacity>
        </View>
        <DeviceList
          onPress={this.connectDevice}
          data={devices}
        />
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  header: {
    flexDirection: 'row',
    padding: 15
  },
  listHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: '#f5f5f9',
    padding: 15
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerTitle: {
    fontSize: 15,
    marginRight: 6,
    fontWeight: '500',
  }
})

渲染設備列表

//react-native-ble-demo/ble_central/src/pages/Service.js
import React from 'react'
import { StyleSheet, Text, ScrollView, View } from 'react-native'
import { SafeAreaView } from 'react-navigation'
import { WingBlank, List } from '@ant-design/react-native'

const ListItem = List.Item
const Brief = ListItem.Brief;

export default class Service extends React.PureComponent {
  static navigationOptions = {
    title: '服務'
  }

  constructor(props) {
    super(props)
    const { navigation } = props
    this.device = navigation.getParam('device')
    this.state = {
      services: []
    }
  }

  componentDidMount() {
    this.getServices()
  }

  getServices() {
    this.device.services()
      .then(services => {
        this.setState({
          services
        })
      })
  }

  onPressService = (service) => {
    const { navigation } = this.props
    navigation.push('Characteristic', { service })
  }

  render() {
    const { services } = this.state
    const device = this.device
    return (
      <SafeAreaView style={styles.fill}>
        <WingBlank style={{ paddingVertical: 10 }}>
          <Text style={styles.label}>設備 ID:</Text>
          <Text style={styles.value}>{device.id}</Text>
          <Text style={styles.label}>設備名稱:</Text>
          <Text style={styles.value}>{device.localName || device.name || '無'}</Text>
        </WingBlank>
        <View style={styles.listHeader}>
          <Text style={styles.headerTitle}>服務列表</Text>
        </View>
        <ScrollView style={styles.fill}>
          <List>
            {services.map((service, index) => (
              <ListItem key={index} arrow="horizontal" onPress={() => this.onPressService(service)}>
                {service.id}
                <Brief>{`UUID: ${service.uuid}`}</Brief>
              </ListItem>
            ))}
          </List>
        </ScrollView>
      </SafeAreaView >
    )
  }
}

const styles = StyleSheet.create({
  fill: {
    flex: 1
  },
  label: {
    fontWeight: '500',
    fontSize: 16,
  },
  value: {
    marginTop: 8,
    marginBottom: 10,
    color: '#666'
  },
  listHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f5f5f9',
    padding: 15
  },
  headerTitle: {
    fontSize: 15,
    fontWeight: '500'
  }
})

//react-native-ble-demo/ble_central/src/pages/Operation.js
import React from 'react'
import { StyleSheet, Text, ScrollView, View, TextInput, Alert } from 'react-native'
import { SafeAreaView } from 'react-navigation'
import { WingBlank, Button } from '@ant-design/react-native'
import { Buffer } from 'buffer/'

function formatToDecimal(buffer) {
  const hexStr = buffer.toString('hex')
  return hexStr ? parseInt(hexStr, 16) : ''
}

function strToBinary(str) {
  const result = [];
  const list = str.split("");
  for (let i = 0; i < list.length; i++) {
    const str = list[i].charCodeAt().toString(2);
    result.push(str);
  }
  return result.join("");
}

export default class Operation extends React.PureComponent {
  static navigationOptions = {
    title: '讀寫特征'
  }

  constructor(props) {
    super(props)
    const { navigation } = props
    this.characteristic = navigation.getParam('characteristic')
    this.state = {
      readValue: '',
      writeValue: ''
    }
  }

  read = () => {
    this.characteristic.read()
      .then(characteristic => {
        console.log('讀取特征值：', characteristic.value)
        this.setState({
          readValue: characteristic.value
        })
      })
  }

  write = () => {
    const { writeValue } = this.state
    if (!writeValue) {
      Alert.alert('請輸入要寫入的特征值')
    }
    const str = Buffer.from(writeValue, 'hex').toString('base64')
    console.log('開始寫入特征值：', str)
    this.characteristic.writeWithResponse(str)
      .then(() => {
        Alert.alert('成功寫入特征值', '現在點擊讀取特征值看看吧...')
      })
      .catch(err => {
        console.log('寫入特征值出錯：', err)
      })
  }

  render() {
    const charac = this.characteristic
    const { readValue, writeValue } = this.state;
    const buffer = Buffer.from(readValue, 'base64');
    return (
      <SafeAreaView style={styles.fill}>
        <ScrollView style={styles.fill}>
          <WingBlank style={{ paddingVertical: 10 }}>
            <Text style={styles.label}>特征 ID:</Text>
            <Text style={styles.value}>{charac.id}</Text>
            <Text style={styles.label}>特征 UUID:</Text>
            <Text style={styles.value}>{charac.uuid}</Text>
            <View style={styles.attributeWrapper}>
              <Text style={styles.name}>
                可讀:
             <Text style={styles.des}>{charac.isReadable ? '是' : '否'}</Text>
              </Text>
              <Text style={styles.name}>
                可寫(有響應):
              <Text style={styles.des} >{charac.isWritableWithResponse ? '是' : '否'}</Text>
              </Text>
              <Text style={styles.name}>
                可寫(無響應):
              <Text style={styles.des}>{charac.isWritableWithoutResponse ? '是' : '否'}</Text>
              </Text>
              <Text style={styles.name}>
                可通知:
              <Text style={styles.des}>{charac.isNotifiable ? '是' : '否'}</Text>
              </Text>
            </View>
            <Text style={styles.label}>當前特征值</Text>
            <Text style={styles.charac}>{`二進制: ${strToBinary(buffer.toString())}`}</Text>
            <Text style={styles.charac}>{`十進制: ${formatToDecimal(buffer)}`}</Text>
            <Text style={styles.charac}>{`十六進制: ${buffer.toString('hex')}`}</Text>
            <Text style={styles.charac}>{`UTF8: ${buffer.toString()}`}</Text>
            <Button type="primary" style={{ marginTop: 8 }} onPress={this.read}>讀取特征值</Button>
            <TextInput
              style={styles.input}
              placeholder="請輸入特征值（十六進制字符串）"
              value={writeValue}
              onChangeText={v => this.setState({ writeValue: v })}
            />
            <Button type="primary" onPress={this.write}>寫入特征值</Button>
          </WingBlank>
        </ScrollView>
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  fill: {
    flex: 1
  },
  label: {
    fontWeight: '500',
    fontSize: 16,
  },
  value: {
    marginTop: 8,
    marginBottom: 10,
    color: '#666'
  },
  attributeWrapper: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
    marginBottom: 16
  },
  des: {
    color: '#666'
  },
  name: {
    fontWeight: '500',
    fontSize: 16,
    marginRight: 16
  },
  input: {
    marginVertical: 32
  },
  charac: {
    fontSize: 15,
    color: '#666',
    marginVertical: 5
  }
})

//react-native-ble-demo/ble_central/src/pages/Characteristic.js
import React from 'react'
import { StyleSheet, Text, ScrollView, View } from 'react-native'
import { SafeAreaView } from 'react-navigation'
import { WingBlank, List } from '@ant-design/react-native'

const ListItem = List.Item
const Brief = ListItem.Brief;

export default class Characteristic extends React.PureComponent {
  static navigationOptions = {
    title: '特征'
  }

  constructor(props) {
    super(props)
    const { navigation } = props
    this.service = navigation.getParam('service')
    this.state = {
      characteristics: []
    }
  }

  componentDidMount() {
    this.getCharacteristics()
  }

  getCharacteristics() {
    this.service.characteristics()
      .then(characteristics => {
        this.setState({
          characteristics
        })
      })
  }

  onPressCharacteristic = (characteristic) => {
    const { navigation } = this.props
    navigation.push('Operation', { characteristic })
  }

  render() {
    const { characteristics } = this.state
    const service = this.service
    return (
      <SafeAreaView style={styles.fill}>
        <WingBlank style={{ paddingVertical: 10 }}>
          <Text style={styles.label}>服務 ID:</Text>
          <Text style={styles.value}>{service.id}</Text>
          <Text style={styles.label}>服務 UUID:</Text>
          <Text style={styles.value}>{service.uuid}</Text>
        </WingBlank>
        <View style={styles.listHeader}>
          <Text style={styles.headerTitle}>特征列表</Text>
        </View>
        <ScrollView style={styles.fill}>
          <List>
            {characteristics.map((characteristic, index) => (
              <ListItem key={index} arrow="horizontal" onPress={() => this.onPressCharacteristic(characteristic)}>
                {characteristic.id}
                <Brief>{`UUID: ${characteristic.uuid}`}</Brief>
              </ListItem>
            ))}
          </List>
        </ScrollView>
      </SafeAreaView >
    )
  }
}

const styles = StyleSheet.create({
  fill: {
    flex: 1
  },
  label: {
    fontWeight: '500',
    fontSize: 16,
  },
  value: {
    marginTop: 8,
    marginBottom: 10,
    color: '#666'
  },
  listHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f5f5f9',
    padding: 15
  },
  headerTitle: {
    fontSize: 15,
    fontWeight: '500'
  }
})

//react-native-ble-demo/ble_central/src/components/DeviceList/index.js
import React from 'react'
import { StyleSheet, FlatList, View, Text, TouchableOpacity } from 'react-native'

export default class DeviceList extends React.PureComponent {
  renderItem = ({ item }) => {
    const { onPress } = this.props
    return (
      <TouchableOpacity onPress={() => onPress(item)}>
        <View style={styles.item}>
          <Text style={styles.title}>{item.id}</Text>
          <Text style={styles.desc}>{item.localName || item.name}</Text>
        </View>
      </TouchableOpacity>
    )
  }

  render() {
    const { data } = this.props
    return (
      <FlatList
        style={styles.list}
        ListEmptyComponent={() => <Text style={styles.placeholder}>暫無數據</Text>}
        data={data}
        ItemSeparatorComponent={() => <View style={styles.border} />}
        keyExtractor={(item, index) => '' + index}
        renderItem={this.renderItem}
      />
    )
  }
}

const styles = StyleSheet.create({
  list: {
    paddingTop: 15
  },
  item: {
    paddingLeft: 16,
    paddingVertical: 8
  },
  title: {
    fontSize: 16
  },
  desc: {
    color: '#666'
  },
  border: {
    backgroundColor: '#d9d9d9',
    height: 0.5
  },
  placeholder: {
    fontSize: 16,
    paddingLeft: 15,
    color: '#666'
  }
})