2016-12-07 6 views
0

React Nativeアプリ(Android)に2つのBluetoothセンサーを接続しています。センサーが接続すると、私はReactネイティブコードでリスナーDeviceEventEmitterを使用してリスンしているdeviceConnectイベントを発生させます。私はSensorコンポーネントを持っていますが、各センサーの状態を表示するために使用していますが、リスナーがSensorインスタンス(センサー1が接続されています)のisConnected状態を更新すると起動すると、両方とも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がバインドされてどのように関係していると思いますが、私は私の人生のために何が間違ってうまくできません。どんな助けでも大歓迎です。

答えて

0

マイdeviceConnectコールバックは、デバイス名を返すように与えられています実際には以下の変更を加えることができ、うまく動作します。私がやっているすべては、(それがアポロクライアントからの実際のアプリ内)の各センサーコンポーネントに小道具としてsensorNameに渡すと、コールバックで返さセンサーの名前がsensorNameと一致した場合、その後、deviceConnectリスナーに、チェックしています小道具

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> 
    ); 
    } 
    } 
0

DeviceEventEmitter登録はグローバルイベントです!2つの異なるセンサーコンポーネントは、異なる動作をする必要がありますので、使用を断念してください。

私の推論によると、あなたはTwoSensors components.Youに二つのセンサを制御したいがcomponent.Youは異なる動作を使用して可能なセンサでいくつかのpropsを宣言することができ<Sensor key="sensor1" onDeviceConnect={() => { //do something1 }}/><Sensor key="sensor2" onDeviceConnect={() => { //do something2 }}/>

+0

ありがとうございました。それがグローバルな出来事であることがわかったので、私はそれを考えることができました。私は簡単な解決策を持っています。 –

関連する問題