我正在开发一个应用程序，我想用它来控制灯光等。我已经在React Native应用程序中实现了Websocket，该应用程序可以工作(测试了我是否连接到了我的Websocket服务器localbus.lp(。我想添加一个Button来控制一些灯，我用HTML测试了这个，这很有效。但是，我如何在React Native应用程序中做到这一点呢？
示例HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://192.168.10.11/apps/js/jquery.js.gz"></script>
<script src="http://192.168.10.11/apps/js/localbus.js.gz"></script>
<script src="http://192.168.10.11/scada/vis/busdecode.js.gz"></script>
</head>
<body>
<div class="container">
<div>
<input type = "text" id= "input-get" placeholder = "Get Value">
</div>
<div>
<input type = "text" id = "input-set" placeholder = "Set Value">
</div>
</div>
<button onclick="toggle()">KONTOR</button>
<script>
localbus.init('http://192.168.10.11', 'admin:password');
var toggled = false;
function toggle(){
if(!toggled){
toggled = true;
localbus.write('1/0/4', true);
buttontext = PÅ
return;
}
if (toggled) {
toggled = false;
localbus.write('1/0/4', false);
return;
}
}
</script>
<script>
以下是我在React Native中的App.js：当我在浏览器中运行它时，它会打开到我的websocket服务器localbus.lp的连接。但我不确定在哪里以及如何添加与HTML相同的Button。
export default class App extends Component{
render(){
return(
<View style={{flex: 1}}>
<WS
ref = {ref => {this.ws = ref}}
url = "ws://admin:password@192.168.10.11/apps/localbus.lp"
onOpen = {() =>{
console.log('Open')
this.ws.send('Hello')
}}
onMessage={console.log}
onError={console.log}
onClose={console.log}
reconnect
/>
<Button>
</Button>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
localbus官方不支持React Native，在开源中不存在任何npm包。React Native支持WebSocket，因此您可以尝试使用this.ws.send()和this.ws.onmessage方法实现与localbus的手动工作