Question

我正在将两个蓝牙传感器连接到我的React Native应用程序（Android）。当传感器连接时，它会使用DeviceEventEmitter侦听器在我的React Native代码中触发我正在侦听的deviceConnect事件。我有一个Sensor组件，用于显示每个传感器的状态，但每当监听器触发更新isConnected实例的Sensor状态时（例如传感器1连接），它就是更新两个Sensor中的状态，即它显示两个传感器的连接状态为真，而不仅仅是连接的传感器。我的代码的缩减版本如下。

class Sensor extends React.Component {

    constructor(props) {
       super(props);
       this.state = {
         sensorAddress: null,
         sensorIsConnected:false,
         sensorIsDiscovering: false,
         sensorBattery:0
       };
     }

    componentWillUnmount(){
      DeviceEventEmitter.removeListener('deviceConnect', (message) => console.log(message))
    }

     componentDidMount(){
       DeviceEventEmitter.addListener(
         'deviceConnect',
         (data) => {
           this.setState({sensorIsConnected: true})
           console.log("Connected" + JSON.stringify(data))
         }
       );
     }

  render() {
    return (
      <View>
        <Text>CONNECTED EQUALS {this.state.sensorIsConnected}</Text>
    </View>
    );
  }
}

class TwoSensors extends React.Component {

  render() {
    return (
      <View>
        <Text>Sensor 1</Text>
        <Sensor key="sensor1"/>
        <Text>Sensor 2</Text>
        <Sensor key="sensor2"/>
    </View>
    );
  }
}

我认为这与DeviceEventEmitter的约束方式有关，但我不能为我的生活弄清楚什么是错的。任何帮助将不胜感激。

Answer 1

DeviceEventEmitter注册是一个全局事件！两个不同的传感器组件应该有不同的行为，所以你最好放弃使用它。

根据我的推理，你想控制TwoSensors组件中的两个传感器。你可以在传感器组件中声明一些props。你可以使用不同的行为，如<Sensor key="sensor1" onDeviceConnect={() => { //do something1 }}/><Sensor key="sensor2" onDeviceConnect={() => { //do something2 }}/>

Answer 2

我的deviceConnect回调会返回设备名称，因此我可以在下面进行更改并且工作正常。我正在做的就是将sensorName作为道具传递到每个传感器组件（在真实应用程序中来自Apollo客户端），然后在deviceConnect监听器中检查是否有名称回调中返回的传感器与sensorName道具匹配。

  class Sensor extends React.Component {

      constructor(props) {
         super(props);
         this.state = {
           sensorAddress: null,
           sensorIsConnected:false,
           sensorIsDiscovering: false,
           sensorBattery:0
         };
       }

      componentWillUnmount(){
        DeviceEventEmitter.removeListener('deviceConnect', (message) => console.log(message))
      }

       componentDidMount(){
         DeviceEventEmitter.addListener(
           'deviceConnect',
           (data) => {
             if (this.props.sensorName == data.name) {
                this.setState({sensorIsConnected: true})
                console.log("Connected" + JSON.stringify(data))
             }
           }
         );
       }

    render() {
      return (
        <View>
          <Text>CONNECTED EQUALS {this.state.sensorIsConnected}</Text>
      </View>
      );
    }
  }

  class TwoSensors extends React.Component {

    render() {
      return (
        <View>
          <Text>Sensor 1</Text>
          <Sensor key="sensor1" sensorName="sensor1"/>
          <Text>Sensor 2</Text>
          <Sensor key="sensor2" sensorName="sensor2"/>
      </View>
      );
    }
  }

在React Native中使用DeviceEventEmitter时，如何更改组件实例的状态

2 个答案: