418 lines
12 KiB
TypeScript
418 lines
12 KiB
TypeScript
import React, { useEffect, useState, useCallback, useRef } from "react";
|
||
import {
|
||
View,
|
||
Text as RNText,
|
||
TextInput,
|
||
ScrollView,
|
||
StyleSheet,
|
||
ActivityIndicator,
|
||
useColorScheme,
|
||
Alert,
|
||
Pressable,
|
||
} from "react-native";
|
||
import { useFocusEffect } from "@react-navigation/native";
|
||
import { NativeStackScreenProps } from "@react-navigation/native-stack";
|
||
import { RootStackParamList } from "../App";
|
||
import {
|
||
Central,
|
||
ScannedPeripheral,
|
||
ConnectionStatus,
|
||
} from "@systemic-games/react-native-bluetooth-le";
|
||
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
||
|
||
|
||
|
||
type Props = NativeStackScreenProps<RootStackParamList, "Info">;
|
||
|
||
const powerServiceUuid = "fff1";
|
||
const powerWriteUuid = "fff2";
|
||
const powerNotifyUuid = "fff3";
|
||
|
||
const fullUUID = (uuid: string) =>
|
||
uuid.length === 4
|
||
? `0000${uuid}-0000-1000-8000-00805f9b34fb`
|
||
: uuid;
|
||
|
||
const Text = ({ children, style, ...props }: any) => {
|
||
const isDark = useColorScheme() === "dark";
|
||
return (
|
||
<RNText
|
||
style={[{ color: isDark ? "white" : "black", fontSize: 16 }, style]}
|
||
{...props}
|
||
>
|
||
{children}
|
||
</RNText>
|
||
);
|
||
};
|
||
|
||
export default function InfoScreen({ route, navigation }: Props) {
|
||
const { peripheral } = route.params;
|
||
const deviceKey = peripheral.address || peripheral.systemId;
|
||
|
||
const [isConnected, setIsConnected] = useState(false);
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
const [serial, setSerial] = useState("读取中...");
|
||
const [firmware, setFirmware] = useState("读取中...");
|
||
const [hardware, setHardware] = useState("读取中...");
|
||
const [battery, setBattery] = useState("读取中...");
|
||
const [powerTrim, setPowerTrim] = useState("读取中");
|
||
const [inputTrim, setInputTrim] = useState("100");
|
||
|
||
const [readSuccessToast, setReadSuccessToast] = useState(false); // ✅ 读取成功提示
|
||
const [powerTrimLoading, setPowerTrimLoading] = useState(false); // 正在写入功率微调
|
||
const [powerTrimSuccessToast, setPowerTrimSuccessToast] = useState(false); // 功率微调写入成功
|
||
|
||
|
||
const notifySubscribedRef = useRef(false);
|
||
const disconnectingRef = useRef(false);
|
||
|
||
const prevConnectedRef = useRef(isConnected);
|
||
const isActiveRef = useRef(true);
|
||
|
||
useFocusEffect(
|
||
React.useCallback(() => {
|
||
// 页面获得焦点
|
||
isActiveRef.current = true;
|
||
return () => {
|
||
// 页面失去焦点
|
||
isActiveRef.current = false;
|
||
};
|
||
}, [])
|
||
);
|
||
|
||
|
||
// ========== 监听连接状态变化，断开时提示重新连接 ==========
|
||
useEffect(() => {
|
||
if (prevConnectedRef.current && !isConnected && isActiveRef.current) {
|
||
Alert.alert("提示", "请重新连接设备", [
|
||
{ text: "确定", onPress: () => navigation.goBack() },
|
||
]);
|
||
}
|
||
prevConnectedRef.current = isConnected;
|
||
}, [isConnected]);
|
||
|
||
// ========== 页面即将返回时，强制断开蓝牙 ==========
|
||
useEffect(() => {
|
||
const unsubscribe = navigation.addListener("beforeRemove", async (e) => {
|
||
if (disconnectingRef.current) return;
|
||
disconnectingRef.current = true;
|
||
|
||
const next = e.data.action?.type;
|
||
const action = e.data.action as any;
|
||
|
||
// ✅ 判断是否跳转到 Dfu 页面
|
||
if (next === "NAVIGATE" && action?.payload?.name === "Dfu") {
|
||
console.log("➡️ 跳转到 DFU，不断开蓝牙");
|
||
disconnectingRef.current = false;
|
||
return;
|
||
}
|
||
|
||
// 🔌 其他页面离开则断开蓝牙
|
||
console.log("📴 页面关闭，断开蓝牙...");
|
||
try {
|
||
await Central.disconnectPeripheral(peripheral);
|
||
console.log("✅ 已断开蓝牙");
|
||
} catch (err) {
|
||
console.warn("❌ 断开失败：", err);
|
||
} finally {
|
||
disconnectingRef.current = false;
|
||
}
|
||
});
|
||
return unsubscribe;
|
||
}, [navigation, peripheral]);
|
||
|
||
// ========== BLE notify 订阅 ==========
|
||
useEffect(() => {
|
||
const connectionHandler = async (ev: {
|
||
peripheral: ScannedPeripheral;
|
||
connectionStatus: ConnectionStatus;
|
||
}) => {
|
||
const addr = ev.peripheral.address || ev.peripheral.systemId;
|
||
if (addr !== deviceKey) return;
|
||
|
||
console.log("🔌 connection event:", ev.connectionStatus);
|
||
setIsConnected(
|
||
ev.connectionStatus === "connected" || ev.connectionStatus === "ready"
|
||
);
|
||
|
||
if (ev.connectionStatus === "ready" && !notifySubscribedRef.current) {
|
||
console.log("✅ device ready - subscribe notify FFF3");
|
||
try {
|
||
await Central.unsubscribeCharacteristic(
|
||
peripheral,
|
||
fullUUID(powerServiceUuid),
|
||
fullUUID(powerNotifyUuid)
|
||
).catch(() => {});
|
||
await Central.subscribeCharacteristic(
|
||
peripheral,
|
||
fullUUID(powerServiceUuid),
|
||
fullUUID(powerNotifyUuid),
|
||
(notifyEv) => {
|
||
try {
|
||
const raw = (notifyEv as any).value;
|
||
if (!raw) return;
|
||
const arr =
|
||
raw instanceof Uint8Array
|
||
? Array.from(raw)
|
||
: Array.from(new Uint8Array(raw));
|
||
if (arr[0] === 0x02 && arr.length >= 2) {
|
||
setPowerTrim(arr[1].toString());
|
||
setInputTrim(arr[1].toString());
|
||
}
|
||
} catch (err) {
|
||
console.warn("notify parse error", err);
|
||
}
|
||
}
|
||
);
|
||
notifySubscribedRef.current = true;
|
||
console.log("✅ notify 已订阅");
|
||
} catch (err) {
|
||
console.warn("❌ notify 订阅失败:", err);
|
||
}
|
||
}
|
||
};
|
||
|
||
Central.addListener("peripheralConnectionStatus", connectionHandler);
|
||
return () => {
|
||
Central.removeListener("peripheralConnectionStatus", connectionHandler);
|
||
notifySubscribedRef.current = false;
|
||
};
|
||
}, [deviceKey, peripheral]);
|
||
|
||
// ========== 首次连接并读取信息 ==========
|
||
useEffect(() => {
|
||
(async () => {
|
||
setIsLoading(true);
|
||
try {
|
||
await Central.connectPeripheral(peripheral);
|
||
await new Promise<void>((resolve) => setTimeout(resolve, 500));
|
||
|
||
const readStr = async (srv: string, char: string) => {
|
||
try {
|
||
const v = await Central.readCharacteristic(
|
||
peripheral,
|
||
fullUUID(srv),
|
||
fullUUID(char)
|
||
);
|
||
return v ? String.fromCharCode(...(v as any)) : "未知";
|
||
} catch {
|
||
return "未知";
|
||
}
|
||
};
|
||
|
||
setSerial(await readStr("180a", "2a25"));
|
||
setFirmware(await readStr("180a", "2a28"));
|
||
setHardware(await readStr("180a", "2a27"));
|
||
|
||
try {
|
||
const v = await Central.readCharacteristic(
|
||
peripheral,
|
||
fullUUID("180f"),
|
||
fullUUID("2a19")
|
||
);
|
||
if (v && (v as any).length) setBattery(`${(v as any)[0]}%`);
|
||
} catch {
|
||
setBattery("未知");
|
||
}
|
||
|
||
console.log("✅ info 读取完成");
|
||
|
||
|
||
|
||
try {
|
||
await Central.writeCharacteristic(
|
||
peripheral,
|
||
fullUUID(powerServiceUuid),
|
||
fullUUID(powerWriteUuid),
|
||
new Uint8Array([0x04]).buffer,
|
||
{ withoutResponse: false }
|
||
);
|
||
console.log("✅ 已发送 0x04，等待 notify 更新功率微调");
|
||
|
||
// notify 回调里已经订阅了，所以这里不用再重复订阅
|
||
// 可以稍等 300ms，确保 notify 回来后 UI 会更新
|
||
await new Promise<void>(resolve => setTimeout(() => resolve(), 300));
|
||
} catch (err) {
|
||
console.warn("❌ 首次读取功率微调失败", err);
|
||
}
|
||
|
||
} catch (e) {
|
||
console.warn("❌ 读取失败", e);
|
||
} finally {
|
||
setIsLoading(false);
|
||
|
||
// ✅ 显示读取成功提示 2 秒
|
||
setReadSuccessToast(true);
|
||
setTimeout(() => setReadSuccessToast(false), 2000);
|
||
|
||
}
|
||
})();
|
||
}, [peripheral]);
|
||
|
||
// ========== 写入功率微调 ==========
|
||
const updatePowerTrim = async () => {
|
||
const val = parseInt(inputTrim);
|
||
if (isNaN(val) || val < 50 || val > 200) {
|
||
Alert.alert("提示", "请输入有效数字（50~200）");
|
||
return;
|
||
}
|
||
if (val === Number(powerTrim)) {
|
||
console.log("⚙️ 相同数值，跳过发送");
|
||
return;
|
||
}
|
||
if (!isConnected) {
|
||
Alert.alert("提示", "设备未连接");
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setPowerTrimLoading(true);
|
||
|
||
console.log("🚀 写入功率微调", val);
|
||
await Central.writeCharacteristic(
|
||
peripheral,
|
||
fullUUID(powerServiceUuid),
|
||
fullUUID(powerWriteUuid),
|
||
new Uint8Array([0x02, val]).buffer,
|
||
{ withoutResponse: false }
|
||
);
|
||
await new Promise<void>((resolve) => setTimeout(() => resolve(), 150));
|
||
await Central.writeCharacteristic(
|
||
peripheral,
|
||
fullUUID(powerServiceUuid),
|
||
fullUUID(powerWriteUuid),
|
||
new Uint8Array([0x04]).buffer,
|
||
{ withoutResponse: false }
|
||
);
|
||
|
||
setPowerTrimLoading(false);
|
||
setPowerTrimSuccessToast(true);
|
||
setTimeout(() => setPowerTrimSuccessToast(false), 2000);
|
||
|
||
} catch (err) {
|
||
console.warn("❌ 写入失败", err);
|
||
Alert.alert("写入失败");
|
||
}
|
||
};
|
||
|
||
// ========== UI ==========
|
||
return (
|
||
<ScrollView contentContainerStyle={{ padding: 20, gap: 8 }}>
|
||
<View style={styles.row}>
|
||
<Text>蓝牙名称: {peripheral.name}</Text>
|
||
</View>
|
||
<View style={styles.row}>
|
||
<Text>ID号: {serial}</Text>
|
||
</View>
|
||
<View style={styles.row}>
|
||
<Text>固件版本: {firmware}</Text>
|
||
</View>
|
||
<View style={styles.row}>
|
||
<Text>电量: {battery}</Text>
|
||
</View>
|
||
<View style={styles.row}>
|
||
<Text>连接状态: {isConnected ? "已连接" : "未连接"}</Text>
|
||
</View>
|
||
|
||
<View style={{ marginTop: 20 }}>
|
||
<Text>功率微调: {powerTrim}%</Text>
|
||
<TextInput
|
||
style={styles.input}
|
||
value={inputTrim}
|
||
onChangeText={setInputTrim}
|
||
keyboardType="numeric"
|
||
onEndEditing={updatePowerTrim}
|
||
/>
|
||
<Pressable onPress={updatePowerTrim} style={styles.pressable} disabled={isLoading || powerTrimLoading}>
|
||
<Text style={{ color: "white" }}>更新功率微调</Text>
|
||
</Pressable>
|
||
</View>
|
||
|
||
<View style={{ marginTop: 30 }}>
|
||
<Pressable
|
||
onPress={() => {
|
||
if (!isConnected) {
|
||
Alert.alert("提示", "请重新连接设备", [
|
||
{
|
||
text: "确定",
|
||
onPress: () => {
|
||
// 返回 ScanScreen
|
||
navigation.goBack();
|
||
},
|
||
},
|
||
]);
|
||
return;
|
||
}
|
||
|
||
// 蓝牙已连接，正常跳转 DFU
|
||
navigation.navigate("Dfu", {
|
||
deviceId: deviceKey,
|
||
name: peripheral.name,
|
||
firmware,
|
||
});
|
||
}}
|
||
style={styles.pressable}
|
||
disabled={isLoading || powerTrimLoading} // ❌ 禁用点击
|
||
>
|
||
<Text style={{ color: "white" }}>升级固件</Text>
|
||
</Pressable>
|
||
</View>
|
||
|
||
{isLoading && (
|
||
<View style={{ marginVertical: 60, alignItems: "center" }}>
|
||
<ActivityIndicator size={80} color="#E7141E" />
|
||
<Text style={{ marginTop: 10, fontSize: 16 }}>正在读取信息...</Text>
|
||
</View>
|
||
)}
|
||
|
||
{/* ✅ 读取成功提示，固定在页面底部 */}
|
||
{readSuccessToast && (
|
||
<View style={{ marginVertical: 60, alignItems: "center" }}>
|
||
<Icon name="check-circle" size={60} color="#E7141E" />
|
||
<Text style={{ marginTop: 10, fontSize: 16 }}>读取成功！</Text>
|
||
</View>
|
||
)}
|
||
|
||
{/* 正在写入功率微调 */}
|
||
{powerTrimLoading && (
|
||
<View style={{ marginVertical: 60, alignItems: "center" }}>
|
||
<ActivityIndicator size={60} color="#E7141E" />
|
||
<Text style={{ marginTop: 10, fontSize: 16 }}>正在写入功率微调...</Text>
|
||
</View>
|
||
)}
|
||
|
||
{/* 功率微调写入成功 */}
|
||
{powerTrimSuccessToast && (
|
||
<View style={{ marginVertical: 60, alignItems: "center" }}>
|
||
<Icon name="check-circle" size={60} color="#E7141E" />
|
||
<Text style={{ marginTop: 10, fontSize: 16 }}>功率微调更新成功！</Text>
|
||
</View>
|
||
)}
|
||
|
||
</ScrollView>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
row: {
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: "#E7141E",
|
||
paddingBottom: 4, // 横线和文字保持一定间距
|
||
marginBottom: 8, // 行间距
|
||
},
|
||
input: {
|
||
borderWidth: 1,
|
||
borderColor: "#ccc",
|
||
padding: 6,
|
||
marginTop: 5,
|
||
borderRadius: 4,
|
||
},
|
||
pressable: {
|
||
padding: 10,
|
||
backgroundColor: "#E7141E",
|
||
marginTop: 10,
|
||
borderRadius: 6,
|
||
alignItems: "center",
|
||
},
|
||
});
|