如何在React Native中使用DeviceEventEmitter時更改組件的實例的狀態

我將兩個藍牙傳感器連接到我的React Native應用程序（Android）。當傳感器連接時，它會使用DeviceEventEmitter監聽器觸發我在React Native代碼中偵聽的deviceConnect事件。我有一個Sensor組件用於顯示每個傳感器的狀態，但每當偵聽器觸發以更新Sensor實例的狀態（例如，傳感器1連接）時，它將更新Sensor中的狀態，即它顯示已連接對於兩個傳感器來說都是正確的，而不僅僅是連接的傳感器。下面是我的代碼的簡化版本。如何在React Native中使用DeviceEventEmitter時更改組件的實例的狀態

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如何綁定，但我不能爲我的生活工作有什麼不對。任何幫助將非常感激。

來源

2016-12-07 Christopher Duke

我deviceConnect回調傳感器聲明一些props返回的設備名稱所以我實際上可以在下面進行更改並且工作正常。我所做的只是將sensorName作爲道具傳遞給每個Sensor組件（實際應用程序中它來自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> 
    ); 
    } 
    }

來源

2016-12-14 17:29:50

DeviceEventEmitter註冊是一個全局事件！兩個不同的傳感器組件應該有不同的行爲，所以你最好放棄使用它。

根據我的推理，你要控制在TwoSensors components.You兩個傳感器可在component.You可以使用不同的行爲給出類似<Sensor key="sensor1" onDeviceConnect={() => { //do something1 }}/><Sensor key="sensor2" onDeviceConnect={() => { //do something2 }}/>

來源

2016-12-08 02:21:24

感謝您的信息。知道這是一個全球性的事件幫助我重新思考，並且我有一個簡單的工作解決方案（查看發佈的答案） –

如何在React Native中使用DeviceEventEmitter時更改組件的實例的狀態

回答

相關問題