React Native组件无法实时展示BleConnector连接状态求助

React 组件只有在自身 state 更新或传入 props 变化时才会触发重新渲染。你直接修改全局静态类的connected属性，组件没有机制感知到这个变化，所以不会自动更新视图。

下面提供两种符合 React 生态的实现方式，优先推荐第一种：

方案1：用 React Context 管理蓝牙状态（推荐，类似 Angular Service 的全局状态共享） #

这种方式能让蓝牙状态在全局组件间共享，且状态变化时自动触发订阅组件的重新渲染。

1. 重构 BleConnector，添加状态监听机制 #

让全局类支持订阅状态变化的回调，方便后续通知组件更新：

import { BleManager } from "react-native-ble-plx";

class BleConnector {
    static bleManager = new BleManager();
    static connected = false;
    static listeners = []; // 存储状态变化的回调函数

    // 订阅状态变化，返回取消订阅的方法
    static subscribe(callback) {
        this.listeners.push(callback);
        callback(this.connected); // 立即同步当前状态
        return () => {
            this.listeners = this.listeners.filter(cb => cb !== callback);
        };
    }

    static connect() {
        // 模拟蓝牙连接操作，实际替换成你的业务逻辑
        setTimeout(() => {
            this.connected = true;
            // 状态更新时通知所有订阅者
            this.listeners.forEach(callback => callback(this.connected));
        }, 1000);
    }

    static disconnect() {
        this.connected = false;
        this.listeners.forEach(callback => callback(this.connected));
    }
}

export default BleConnector;

2. 创建蓝牙状态 Context #

新建BleContext.js文件，把蓝牙状态和操作方法封装成 Context：

import React, { createContext, useState, useEffect } from 'react';
import BleConnector from './BleConnector';

const BleContext = createContext();

export const BleProvider = ({ children }) => {
    const [isConnected, setIsConnected] = useState(false);

    useEffect(() => {
        // 订阅蓝牙状态变化，更新 Context 内部的 state
        const unsubscribe = BleConnector.subscribe((connected) => {
            setIsConnected(connected);
        });
        // 组件卸载时取消订阅，避免内存泄漏
        return unsubscribe;
    }, []);

    return (
        <BleContext.Provider value={{ 
            isConnected, 
            connect: BleConnector.connect, 
            disconnect: BleConnector.disconnect 
        }}>
            {children}
        </BleContext.Provider>
    );
};

export default BleContext;

3. 在根组件包裹 Provider #

比如在App.js中，让所有需要使用蓝牙状态的组件都处于 Provider 范围内：

import { BleProvider } from './BleContext';
import HelloWorld from './HelloWorld';

export default function App() {
    return (
        <BleProvider>
            <HelloWorld />
        </BleProvider>
    );
}

4. 在组件中使用 Context #

修改HelloWorld组件，通过 Context 获取蓝牙状态：

import React, { useContext } from 'react';
import { View, Text, Button } from 'react-native';
import BleContext from './BleContext';
import { mergeNativeStyles } from '你的样式库路径';
import defaultStyle from './defaultStyle';

export function HelloWorld({ style }) {
    const styles = mergeNativeStyles(defaultStyle, style);
    const { isConnected, connect } = useContext(BleContext);

    return (
        <View style={styles.container}>
            <Text style={styles.label}>{isConnected ? "connected" : "disconnected"}</Text>
            {/* 可添加按钮测试连接功能 */}
            <Button title="连接蓝牙" onPress={connect} />
        </View>
    );
}

方案2：组件内部维护状态+定时检查（仅临时调试用） #

如果只是临时测试，可以在组件内用定时器定期检查全局变量的变化，手动更新组件 state：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import BleConnector from './BleConnector';
import { mergeNativeStyles } from '你的样式库路径';
import defaultStyle from './defaultStyle';

export class HelloWorld extends Component {
    state = {
        isConnected: BleConnector.connected
    };

    styles = mergeNativeStyles(defaultStyle, this.props.style);

    componentDidMount() {
        // 每500毫秒检查一次状态变化
        this.checkInterval = setInterval(() => {
            if (this.state.isConnected !== BleConnector.connected) {
                this.setState({ isConnected: BleConnector.connected });
            }
        }, 500);
    }

    componentWillUnmount() {
        clearInterval(this.checkInterval); // 组件卸载时清除定时器
    }

    render() {
        return (
            <View style={this.styles.container}>
                <Text style={styles.label}>{this.state.isConnected ? "connected" : "disconnected"}</Text>
            </View>
        );
    }
}

这种方式频繁轮询会浪费性能，不适合正式环境使用。

React 是状态驱动视图的框架，只有把状态纳入 React 的状态管理体系（比如 Context、Redux），或者通过回调通知组件更新自身 state，才能触发组件的重新渲染。直接修改全局静态变量无法被 React 的状态系统感知，自然不会更新视图。

内容的提问来源于stack exchange，提问作者Anonymoose