11

android/app/src/main/AndroidManifest.xml

@@ -15,7 +15,10 @@
     <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" 
         tools:ignore="ScopedStorage" />
     <uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
-
+    <uses-permission android:name="android.permission.BLUETOOTH"/>
+    <uses-permission android:name="android.permission.BLUETOOTH_ADMIN"/>
+    <uses-permission android:name="android.permission.BLUETOOTH_SCAN"/>
+    <uses-permission android:name="android.permission.BLUETOOTH_CONNECT"/>
     <application
         android:name=".MainApplication"
         android:label="@string/app_name"

package.json

@@ -21,16 +21,18 @@
     "@ui-kitten/components": "^5.3.1",
     "@ui-kitten/eva-icons": "^5.3.1",
     "axios": "^1.7.7",
+    "base-64": "^1.0.0",
     "qrcode": "^1.5.4",
     "react": "18.2.0",
     "react-native": "^0.74.6",
     "react-native-amap3d": "^3.0.7",
+    "react-native-ble-plx": "^3.2.1",
     "react-native-camera": "^4.2.1",
     "react-native-contacts": "^8.0.4",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "^2.20.2",
     "react-native-linear-gradient": "^2.8.3",
-    "react-native-permissions": "^5.1.0",
+    "react-native-permissions": "^5.2.1",
     "react-native-qrcode-scanner": "^1.5.5",
     "react-native-reanimated": "^3.16.1",
     "react-native-safe-area-context": "^4.14.0",
@@ -40,7 +42,8 @@
     "react-native-toast-message": "^2.2.1",
     "react-native-view-shot": "^4.0.0",
     "react-native-wheel-picker-android": "^2.0.6",
-    "rn-fetch-blob": "^0.12.0"
+    "rn-fetch-blob": "^0.12.0",
+    "utf8": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -50,8 +53,10 @@
     "@react-native/eslint-config": "0.74.87",
     "@react-native/metro-config": "0.74.87",
     "@react-native/typescript-config": "0.74.87",
+    "@types/base-64": "^1.0.2",
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",
+    "@types/utf8": "^3.0.3",
     "babel-jest": "^29.6.3",
     "eslint": "^8.19.0",
     "jest": "^29.6.3",

src/utils/BluetoothManager.ts

@@ -0,0 +1,411 @@
+import { BleManager, Device, State, Characteristic, BleError } from 'react-native-ble-plx';
+import { PermissionsAndroid, Platform } from 'react-native';
+import base64 from 'base-64';
+import utf8 from 'utf8';
+
+// 定义命令类型
+export enum CommandType {
+    REBOOT = '11reboot',
+    OPEN = '11open',
+    CLOSE = '11close',
+    PLAY = '11play1@'
+}
+
+// 定义连接状态类型
+export enum ConnectionState {
+    DISCONNECTED = 'disconnected',
+    CONNECTING = 'connecting',
+    CONNECTED = 'connected',
+    DISCONNECTING = 'disconnecting'
+}
+
+class BluetoothManager {
+    private static instance: BluetoothManager;
+    private manager: BleManager;
+    private isScanning: boolean = false;
+    private connectedDevice: Device | null = null;
+    private isInitializing: boolean = false;
+    private stateSubscription: any = null;
+    private initialized: boolean = false;
+    private scanTimeout: NodeJS.Timeout | null = null;
+    private writeCharacteristic: Characteristic | null = null;
+    private connectionState: ConnectionState = ConnectionState.DISCONNECTED;
+    private connectionStateListeners: ((state: ConnectionState) => void)[] = [];
+    private deviceDisconnectListener: any = null;
+
+    // 蓝牙服务和特征值 UUID
+    private readonly SERVICE_UUID = "000000FF-0000-1000-8000-00805F9B34FB";
+    private readonly CHARACTERISTIC_UUID = "0000FF01-0000-1000-8000-00805F9B34FB";
+
+    private constructor() {
+        this.manager = new BleManager();
+    }
+
+    public static getInstance(): BluetoothManager {
+        if (!BluetoothManager.instance) {
+            BluetoothManager.instance = new BluetoothManager();
+        }
+        return BluetoothManager.instance;
+    }
+
+    // 添加连接状态监听
+    addConnectionStateListener(listener: (state: ConnectionState) => void) {
+        this.connectionStateListeners.push(listener);
+        // 立即触发一次当前状态
+        listener(this.connectionState);
+        return () => {
+            const index = this.connectionStateListeners.indexOf(listener);
+            if (index > -1) {
+                this.connectionStateListeners.splice(index, 1);
+            }
+        };
+    }
+
+    // 更新连接状态
+    private updateConnectionState(state: ConnectionState) {
+        this.connectionState = state;
+        this.connectionStateListeners.forEach(listener => listener(state));
+    }
+
+    // 设置设备断开监听
+    private setupDisconnectionListener(device: Device) {
+        if (this.deviceDisconnectListener) {
+            this.deviceDisconnectListener.remove();
+        }
+
+        this.deviceDisconnectListener = device.onDisconnected((error: BleError | null) => {
+            console.log('设备断开连接:', error ? error.message : '正常断开');
+            this.connectedDevice = null;
+            this.writeCharacteristic = null;
+            this.updateConnectionState(ConnectionState.DISCONNECTED);
+        });
+    }
+
+    private stringToBase64(str: string): string {
+        try {
+            const bytes = utf8.encode(str);
+            const encoded = base64.encode(bytes);
+            return encoded;
+        } catch (error) {
+            console.error('String to base64 conversion failed:', error);
+            throw error;
+        }
+    }
+
+    async requestPermissions(): Promise<boolean> {
+        if (Platform.OS === 'android') {
+            try {
+                if (Platform.Version >= 31) {
+                    const locationPermission = await PermissionsAndroid.request(
+                        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+                        {
+                            title: '位置权限',
+                            message: '扫描蓝牙设备需要位置权限',
+                            buttonNeutral: '稍后询问',
+                            buttonNegative: '取消',
+                            buttonPositive: '确定'
+                        }
+                    );
+
+                    const scanPermission = await PermissionsAndroid.request(
+                        PermissionsAndroid.PERMISSIONS.BLUETOOTH_SCAN,
+                        {
+                            title: '蓝牙扫描权限',
+                            message: '需要蓝牙扫描权限以发现设备',
+                            buttonNeutral: '稍后询问',
+                            buttonNegative: '取消',
+                            buttonPositive: '确定'
+                        }
+                    );
+
+                    const connectPermission = await PermissionsAndroid.request(
+                        PermissionsAndroid.PERMISSIONS.BLUETOOTH_CONNECT,
+                        {
+                            title: '蓝牙连接权限',
+                            message: '需要蓝牙连接权限以连接设备',
+                            buttonNeutral: '稍后询问',
+                            buttonNegative: '取消',
+                            buttonPositive: '确定'
+                        }
+                    );
+
+                    return (
+                        locationPermission === PermissionsAndroid.RESULTS.GRANTED &&
+                        scanPermission === PermissionsAndroid.RESULTS.GRANTED &&
+                        connectPermission === PermissionsAndroid.RESULTS.GRANTED
+                    );
+                } else {
+                    const granted = await PermissionsAndroid.request(
+                        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+                        {
+                            title: '位置权限',
+                            message: '扫描蓝牙设备需要位置权限',
+                            buttonNeutral: '稍后询问',
+                            buttonNegative: '取消',
+                            buttonPositive: '确定'
+                        }
+                    );
+                    return granted === PermissionsAndroid.RESULTS.GRANTED;
+                }
+            } catch (err) {
+                console.warn('权限请求错误:', err);
+                return false;
+            }
+        }
+        return true;
+    }
+
+    async init(): Promise<boolean> {
+        if (this.initialized) {
+            return true;
+        }
+
+        if (this.isInitializing) {
+            return false;
+        }
+
+        try {
+            this.isInitializing = true;
+            const hasPermissions = await this.requestPermissions();
+            
+            if (!hasPermissions) {
+                throw new Error('未获得必要权限');
+            }
+
+            return new Promise((resolve, reject) => {
+                let subscription: any = null;
+                
+                this.manager.state().then(state => {
+                    if (state === State.PoweredOn) {
+                        this.initialized = true;
+                        resolve(true);
+                        return;
+                    }
+                    
+                    subscription = this.manager.onStateChange((newState) => {
+                        if (newState === State.PoweredOn) {
+                            this.initialized = true;
+                            if (subscription) {
+                                subscription.remove();
+                            }
+                            resolve(true);
+                        } else if (newState === State.PoweredOff) {
+                            if (subscription) {
+                                subscription.remove();
+                            }
+                            reject(new Error('请打开蓝牙'));
+                        }
+                    }, true);
+
+                    setTimeout(() => {
+                        if (subscription) {
+                            subscription.remove();
+                        }
+                        reject(new Error('蓝牙初始化超时'));
+                    }, 5000);
+                });
+            });
+        } catch (error) {
+            console.error('蓝牙初始化失败:', error);
+            throw error;
+        } finally {
+            this.isInitializing = false;
+        }
+    }
+
+    async startScan(onDeviceFound: (device: Device) => void): Promise<void> {
+        if (this.isScanning) return;
+
+        try {
+            this.isScanning = true;
+            this.manager.startDeviceScan(
+                null,
+                { allowDuplicates: false },
+                (error, device) => {
+                    if (error) {
+                        console.error('扫描错误:', error);
+                        this.stopScan();
+                        return;
+                    }
+                    if (device && device.name && device.name.startsWith('BBLE')) {
+                        onDeviceFound(device);
+                    }
+                }
+            );
+
+            if (this.scanTimeout) {
+                clearTimeout(this.scanTimeout);
+            }
+
+            this.scanTimeout = setTimeout(() => {
+                this.stopScan();
+            }, 5000);
+        } catch (error) {
+            console.error('开始扫描失败:', error);
+            this.isScanning = false;
+            throw error;
+        }
+    }
+
+    stopScan(): void {
+        if (this.isScanning) {
+            this.manager.stopDeviceScan();
+            this.isScanning = false;
+            
+            if (this.scanTimeout) {
+                clearTimeout(this.scanTimeout);
+                this.scanTimeout = null;
+            }
+        }
+    }
+
+    async connectToDevice(device: Device): Promise<boolean> {
+        try {
+            this.updateConnectionState(ConnectionState.CONNECTING);
+            console.log('开始连接设备:', device.id);
+            
+            // 确保之前的连接已断开
+            if (this.connectedDevice) {
+                this.updateConnectionState(ConnectionState.DISCONNECTING);
+                await this.disconnect();
+            }
+
+            // 建立连接
+            const connectedDevice = await device.connect({
+                timeout: 5000,
+                requestMTU: 512
+            });
+            
+            // 设置断开连接监听
+            this.setupDisconnectionListener(connectedDevice);
+            
+            console.log('设备已连接，开始发现服务...');
+            
+            // 等待服务发现完成
+            await connectedDevice.discoverAllServicesAndCharacteristics();
+            console.log('服务发现完成');
+            
+            // 验证设备是否具有所需的服务和特征
+            const services = await connectedDevice.services();
+            let hasRequiredService = false;
+            let hasRequiredCharacteristic = false;
+
+            for (const service of services) {
+                console.log('发现服务:', service.uuid);
+                if (service.uuid.toLowerCase() === this.SERVICE_UUID.toLowerCase()) {
+                    hasRequiredService = true;
+                    const characteristics = await service.characteristics();
+                    for (const characteristic of characteristics) {
+                        console.log('发现特征:', characteristic.uuid);
+                        if (characteristic.uuid.toLowerCase() === this.CHARACTERISTIC_UUID.toLowerCase()) {
+                            hasRequiredCharacteristic = true;
+                            this.writeCharacteristic = characteristic;
+                            break;
+                        }
+                    }
+                    break;
+                }
+            }
+
+            if (!hasRequiredService || !hasRequiredCharacteristic) {
+                console.error('设备不具备所需的服务或特征');
+                await connectedDevice.cancelConnection();
+                this.updateConnectionState(ConnectionState.DISCONNECTED);
+                return false;
+            }
+
+            this.connectedDevice = connectedDevice;
+            this.updateConnectionState(ConnectionState.CONNECTED);
+            return true;
+        } catch (error) {
+            console.error('连接设备失败:', error);
+            this.updateConnectionState(ConnectionState.DISCONNECTED);
+            return false;
+        }
+    }
+
+    async sendCommand(command: CommandType): Promise<boolean> {
+        if (!this.connectedDevice || !this.writeCharacteristic) {
+            throw new Error('设备未连接或特征未找到');
+        }
+
+        try {
+            console.log('发送命令:', command);
+            const base64Data = this.stringToBase64(command);
+            console.log('编码后的数据:', base64Data);
+            
+            await this.writeCharacteristic.writeWithResponse(base64Data);
+            console.log('命令发送成功');
+            return true;
+        } catch (error) {
+            console.error('发送命令失败:', error);
+            return false;
+        }
+    }
+
+    async rebootDevice(): Promise<boolean> {
+        return this.sendCommand(CommandType.REBOOT);
+    }
+
+    async openDevice(): Promise<boolean> {
+        return this.sendCommand(CommandType.OPEN);
+    }
+
+    async closeDevice(): Promise<boolean> {
+        return this.sendCommand(CommandType.CLOSE);
+    }
+
+    async playResponse(): Promise<boolean> {
+        return this.sendCommand(CommandType.PLAY);
+    }
+
+    async disconnect(): Promise<void> {
+        if (this.connectedDevice) {
+            try {
+                this.updateConnectionState(ConnectionState.DISCONNECTING);
+                await this.connectedDevice.cancelConnection();
+                this.connectedDevice = null;
+                this.writeCharacteristic = null;
+                if (this.deviceDisconnectListener) {
+                    this.deviceDisconnectListener.remove();
+                    this.deviceDisconnectListener = null;
+                }
+                this.updateConnectionState(ConnectionState.DISCONNECTED);
+            } catch (error) {
+                console.error('断开连接失败:', error);
+                throw error;
+            }
+        }
+    }
+
+    isConnected(): boolean {
+        return this.connectionState === ConnectionState.CONNECTED;
+    }
+
+    getConnectionState(): ConnectionState {
+        return this.connectionState;
+    }
+
+    getIsScanning(): boolean {
+        return this.isScanning;
+    }
+
+    destroy(): void {
+        this.stopScan();
+        if (this.stateSubscription) {
+            this.stateSubscription.remove();
+            this.stateSubscription = null;
+        }
+        if (this.deviceDisconnectListener) {
+            this.deviceDisconnectListener.remove();
+            this.deviceDisconnectListener = null;
+        }
+        this.disconnect();
+        this.connectionStateListeners = [];
+        this.manager.destroy();
+        this.initialized = false;
+        this.writeCharacteristic = null;
+    }
+}
+
+export default BluetoothManager.getInstance();

src/views/device/test_bule.tsx

@@ -1,46 +1,492 @@
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { TopNavigation, TopNavigationAction, Icon, Text } from '@ui-kitten/components';
+import React, { useEffect, useState, useCallback, useRef } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Alert, ActivityIndicator } from 'react-native';
+import { TopNavigation, TopNavigationAction, Icon } from '@ui-kitten/components';
 import { useNavigation } from '@react-navigation/native';
+import BluetoothManager, { CommandType, ConnectionState } from '../../utils/BluetoothManager';
+import { Device } from 'react-native-ble-plx';
 
 const BackIcon = (props) => (
-  <Icon {...props} name='arrow-back' />
+    <Icon {...props} name='arrow-back' />
 );
 
 const TestBule = () => {
-  const navigation = useNavigation();
+    const [devices, setDevices] = useState<Device[]>([]);
+    const [isScanning, setIsScanning] = useState(false);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [connectedDevice, setConnectedDevice] = useState<Device | null>(null);
+    const [connectionState, setConnectionState] = useState<ConnectionState>(ConnectionState.DISCONNECTED);
+    const [isSending, setIsSending] = useState(false);
+    const initAttempted = useRef(false);
+    const scanTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const navigation = useNavigation();
 
-  const navigateBack = () => {
-    navigation.goBack();
-  };
+    useEffect(() => {
+        if (!initAttempted.current && !isInitialized) {
+            initBluetooth();
+        }
 
-  const BackAction = () => (
-    <TopNavigationAction icon={BackIcon} onPress={navigateBack} />
-  );
+        // 添加连接状态监听
+        const removeConnectionListener = BluetoothManager.addConnectionStateListener((state) => {
+            setConnectionState(state);
+            if (state === ConnectionState.DISCONNECTED) {
+                setConnectedDevice(null);
+            }
+        });
 
-  return (
-    <View style={styles.container}>
-      <TopNavigation
-        title="蓝牙测试"
-        alignment="center"
-        accessoryLeft={BackAction}
-      />
-      <View style={styles.content}>
-        <Text>TestBule</Text>
-      </View>
-    </View>
-  );
+        return () => {
+            if (scanTimeoutRef.current) {
+                clearTimeout(scanTimeoutRef.current);
+            }
+            BluetoothManager.stopScan();
+            BluetoothManager.disconnect();
+            removeConnectionListener();
+            initAttempted.current = false;
+        };
+    }, []);
+
+    const initBluetooth = useCallback(async () => {
+        if (initAttempted.current || isInitialized) {
+            return;
+        }
+
+        initAttempted.current = true;
+        try {
+            console.log('开始初始化蓝牙...');
+            const initialized = await BluetoothManager.init();
+            console.log('蓝牙初始化结果:', initialized);
+            
+            if (initialized) {
+                setIsInitialized(true);
+            } else {
+                Alert.alert(
+                    '提示',
+                    '请确保已授予必要权限并开启蓝牙',
+                    [
+                        { 
+                            text: '重试', 
+                            onPress: () => {
+                                initAttempted.current = false;
+                                initBluetooth();
+                            }
+                        },
+                        {
+                            text: '取消',
+                            style: 'cancel'
+                        }
+                    ]
+                );
+            }
+        } catch (error) {
+            console.error('初始化错误:', error);
+            initAttempted.current = false;
+            Alert.alert(
+                '错误',
+                error.message || '蓝牙初始化失败',
+                [
+                    { 
+                        text: '重试', 
+                        onPress: () => initBluetooth() 
+                    },
+                    {
+                        text: '取消',
+                        style: 'cancel'
+                    }
+                ]
+            );
+        }
+    }, [isInitialized]);
+
+    const startScan = async () => {
+        if (!isInitialized) {
+            Alert.alert('提示', '蓝牙未初始化');
+            return;
+        }
+
+        if (isScanning) {
+            return;
+        }
+
+        setDevices([]);
+        setIsScanning(true);
+        
+        try {
+            await BluetoothManager.startScan((device) => {
+                if (device.name && device.name.startsWith('BBLE')) {
+                    console.log('发现BBLE设备:', device.name, device.id);
+                    setDevices(prev => {
+                        if (!prev.find(d => d.id === device.id)) {
+                            return [...prev, device];
+                        }
+                        return prev;
+                    });
+                }
+            });
+
+            scanTimeoutRef.current = setTimeout(() => {
+                stopScan();
+            }, 5000);
+        } catch (error) {
+            console.error('扫描失败:', error);
+            Alert.alert('错误', '扫描失败');
+            setIsScanning(false);
+        }
+    };
+
+    const stopScan = () => {
+        if (scanTimeoutRef.current) {
+            clearTimeout(scanTimeoutRef.current);
+            scanTimeoutRef.current = null;
+        }
+        
+        if (isInitialized) {
+            BluetoothManager.stopScan();
+            setIsScanning(false);
+        }
+    };
+
+    const connectToDevice = async (device: Device) => {
+        if (connectionState === ConnectionState.CONNECTING || 
+            connectionState === ConnectionState.DISCONNECTING) {
+            return;
+        }
+
+        try {
+            const connected = await BluetoothManager.connectToDevice(device);
+            if (connected) {
+                setConnectedDevice(device);
+            } else {
+                Alert.alert('错误', '连接设备失败');
+            }
+        } catch (error) {
+            console.error('连接失败:', error);
+            Alert.alert('错误', '连接设备失败');
+        }
+    };
+
+    const disconnectDevice = async () => {
+        try {
+            await BluetoothManager.disconnect();
+        } catch (error) {
+            console.error('断开连接失败:', error);
+            Alert.alert('错误', '断开连接失败');
+        }
+    };
+
+    const sendCommand = async (command: CommandType) => {
+        if (connectionState !== ConnectionState.CONNECTED) {
+            Alert.alert('提示', '请先连接设备');
+            return;
+        }
+
+        if (isSending) {
+            return;
+        }
+
+        setIsSending(true);
+        try {
+            let success = false;
+            switch (command) {
+                case CommandType.REBOOT:
+                    success = await BluetoothManager.rebootDevice();
+                    break;
+                case CommandType.OPEN:
+                    success = await BluetoothManager.openDevice();
+                    break;
+                case CommandType.CLOSE:
+                    success = await BluetoothManager.closeDevice();
+                    break;
+                case CommandType.PLAY:
+                    success = await BluetoothManager.playResponse();
+                    break;
+            }
+
+            if (success) {
+                console.log('命令发送成功:', command);
+            } else {
+                Alert.alert('错误', '命令发送失败');
+            }
+        } catch (error) {
+            console.error('发送命令失败:', error);
+            Alert.alert('错误', '发送命令失败');
+        } finally {
+            setIsSending(false);
+        }
+    };
+
+    const renderDeviceItem = (device: Device) => {
+        const isConnected = connectedDevice?.id === device.id;
+        return (
+            <TouchableOpacity
+                key={device.id}
+                style={[styles.deviceItem, isConnected && styles.connectedDevice]}
+                onPress={() => isConnected ? disconnectDevice() : connectToDevice(device)}
+                disabled={connectionState === ConnectionState.CONNECTING || 
+                         connectionState === ConnectionState.DISCONNECTING}
+            >
+                <View>
+                    <Text style={styles.deviceName}>{device.name}</Text>
+                    <Text style={styles.deviceInfo}>ID: {device.id}</Text>
+                    <Text style={styles.deviceInfo}>RSSI: {device.rssi}</Text>
+                </View>
+                <Text style={[styles.connectionStatus, isConnected && styles.connectedStatus]}>
+                    {getConnectionStatusText()}
+                </Text>
+            </TouchableOpacity>
+        );
+    };
+
+    const getConnectionStatusText = () => {
+        switch (connectionState) {
+            case ConnectionState.CONNECTED:
+                return '已连接';
+            case ConnectionState.CONNECTING:
+                return '连接中...';
+            case ConnectionState.DISCONNECTING:
+                return '断开中...';
+            default:
+                return '未连接';
+        }
+    };
+
+    const renderCommandButtons = () => {
+        if (connectionState !== ConnectionState.CONNECTED) return null;
+
+        return (
+            <View style={styles.commandContainer}>
+                <Text style={styles.commandTitle}>设备控制</Text>
+                <View style={styles.commandButtonsRow}>
+                    <TouchableOpacity 
+                        style={[styles.commandButton, isSending && styles.disabledButton]}
+                        onPress={() => sendCommand(CommandType.REBOOT)}
+                        disabled={isSending}
+                    >
+                        <Text style={styles.commandButtonText}>重启</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity 
+                        style={[styles.commandButton, isSending && styles.disabledButton]}
+                        onPress={() => sendCommand(CommandType.OPEN)}
+                        disabled={isSending}
+                    >
+                        <Text style={styles.commandButtonText}>打开</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.commandButtonsRow}>
+                    <TouchableOpacity 
+                        style={[styles.commandButton, isSending && styles.disabledButton]}
+                        onPress={() => sendCommand(CommandType.CLOSE)}
+                        disabled={isSending}
+                    >
+                        <Text style={styles.commandButtonText}>关闭</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity 
+                        style={[styles.commandButton, isSending && styles.disabledButton]}
+                        onPress={() => sendCommand(CommandType.PLAY)}
+                        disabled={isSending}
+                    >
+                        <Text style={styles.commandButtonText}>响应</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        );
+    };
+
+    const navigateBack = () => {
+        navigation.goBack();
+    };
+
+    return (
+        <View style={styles.container}>
+            <TopNavigation
+                title="蓝牙测试"
+                alignment="center"
+                accessoryLeft={() => (
+                    <TopNavigationAction icon={BackIcon} onPress={navigateBack} />
+                )}
+            />
+            
+            <View style={styles.statusBar}>
+                <Text style={styles.statusText}>
+                    状态: {isInitialized ? '已初始化' : '未初始化'}
+                </Text>
+                <TouchableOpacity 
+                    style={[styles.button, isScanning && styles.scanningButton]}
+                    onPress={isScanning ? stopScan : startScan}
+                    disabled={!isInitialized}
+                >
+                    <Text style={styles.buttonText}>
+                        {isScanning ? '停止搜索' : '开始搜索'}
+                    </Text>
+                </TouchableOpacity>
+            </View>
+
+            <ScrollView style={styles.deviceList}>
+                {devices.length === 0 ? (
+                    <View style={styles.emptyContainer}>
+                        <Text style={styles.emptyText}>
+                            {isScanning ? '正在搜索BBLE设备...' : '未发现BBLE设备'}
+                        </Text>
+                    </View>
+                ) : (
+                    <>
+                        {devices.map(renderDeviceItem)}
+                        {renderCommandButtons()}
+                    </>
+                )}
+            </ScrollView>
+
+            {(connectionState === ConnectionState.CONNECTING || 
+              connectionState === ConnectionState.DISCONNECTING || 
+              isSending) && (
+                <View style={styles.loadingContainer}>
+                    <View style={styles.loadingContent}>
+                        <ActivityIndicator size="large" color="#007AFF" />
+                        <Text style={styles.loadingText}>
+                            {connectionState === ConnectionState.CONNECTING ? '正在连接设备...' :
+                             connectionState === ConnectionState.DISCONNECTING ? '正在断开连接...' :
+                             '正在发送命令...'}
+                        </Text>
+                    </View>
+                </View>
+            )}
+        </View>
+    );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
+    container: {
+        flex: 1,
+        backgroundColor: '#F5F5F5',
+    },
+    statusBar: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 16,
+        backgroundColor: '#FFF',
+        borderBottomWidth: 1,
+        borderBottomColor: '#E5E5E5',
+    },
+    statusText: {
+        fontSize: 16,
+        color: '#333',
+    },
+    button: {
+        backgroundColor: '#007AFF',
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 8,
+    },
+    scanningButton: {
+        backgroundColor: '#FF3B30',
+    },
+    buttonText: {
+        color: '#FFF',
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    deviceList: {
+        flex: 1,
+        padding: 16,
+    },
+    deviceItem: {
+        backgroundColor: '#FFF',
+        padding: 16,
+        borderRadius: 8,
+        marginBottom: 12,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.1,
+        shadowRadius: 2,
+        elevation: 2,
+    },
+    connectedDevice: {
+        borderColor: '#007AFF',
+        borderWidth: 2,
+    },
+    deviceName: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 4,
+    },
+    deviceInfo: {
+        fontSize: 14,
+        color: '#666',
+        marginBottom: 2,
+    },
+    connectionStatus: {
+        fontSize: 14,
+        color: '#999',
+    },
+    connectedStatus: {
+        color: '#007AFF',
+        fontWeight: '600',
+    },
+    emptyContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingTop: 100,
+    },
+    emptyText: {
+        fontSize: 16,
+        color: '#666',
+    },
+    loadingContainer: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    loadingContent: {
+        backgroundColor: '#FFF',
+        padding: 20,
+        borderRadius: 8,
+        alignItems: 'center',
+    },
+    loadingText: {
+        marginTop: 12,
+        fontSize: 16,
+        color: '#333',
+    },
+    commandContainer: {
+        backgroundColor: '#FFF',
+        padding: 16,
+        borderRadius: 8,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    commandTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 16,
+        textAlign: 'center',
+    },
+    commandButtonsRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        marginBottom: 12,
+    },
+    commandButton: {
+        backgroundColor: '#007AFF',
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        borderRadius: 8,
+        minWidth: 120,
+    },
+    commandButtonText: {
+        color: '#FFF',
+        fontSize: 16,
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+    disabledButton: {
+        backgroundColor: '#CCCCCC',
+    },
 });
 
 export default TestBule;