我的应用程序使用的是react native体系结构
native: Some thin UI layer on native mobile device
js: The actual js runtime
bridge: Handles the communication between native and js side. This communication can be over websockets
在上面的方法中，js端定义了UI的外观，并创建了一个虚拟DOM，然后将其传递给本机端，本机端从虚拟DOM创建UI。我想实现的是为js运行时定义一个自定义客户端。
假设我有一个客户端，它通过网络套接字连接到反应本地服务器，服务器将所需的虚拟DOM推送到客户端，客户端使用DOM做一些事情。客户端还将客户端和其他事件传递回服务器，服务器识别并调用react组件类中的相应处理程序。
我看了这个幕后反应的视频，我当然知道这是可能的，但我不知道从哪里开始，也找不到任何相关的文件。
这个来自react原生教程的指南与我想要的类似，但我希望这个应用程序独立，而不是在android或ios等原生设备上运行。该应用程序可以是一个简单的控制台应用程序，并且可以简单地在控制台上记录通过websocket通信从服务器接收的消息。
更具体地说，我正在寻找类似于这种的东西
For instance, if a React Native app is defined like this:
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
<TextInput
keyboardType="default"
returnKeyType="done"
onKeyPress={this.handleKeyDown}
placeholder="Enter text here..."
/>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
handleKeyDown: function(e) {
console.log(e.nativeEvent.key);
},
The server might send a JSON message to the websocket client that looks like this. This is just a suggested format - the actual format just has to encapsulate a good view and be readable for review. The true format will come in a later challenge, so all we're doing now is validating.
{
"app": {
"name": "Hello World",
"view": {
"text": "Hello World!",
"textInput": "Enter text here"
}
}
}
Client
The client will open a connection to a websocket on the server. Once the connection is open, it will send a simple message, like this:
{
"onConnect": {
"name": "React client1"
}
}
The server will respond with the view details described above.
Then, the client can send an event, like a key press. The event could look something like this:
{
"event": {
"type": "keyDown",
"key": "Enter"
}
}
At which point the handleKeyDown callback would be called on the server. An update to the text should then be sent from the server back to the client to complete the full loop. This update to the text can just be something like below, but it should be fully implemented in React Native and then translated down for the client.
{
"update": {
"text": "Updated text"
}
}
您对react native的理解是正确的。我想补充的一件事是，react native是一种用Javascript和react Framework风格编写ios/android应用程序的方法。因此，如果你想制作一个控制台应用程序，你可以使用React with Electron[如果你想要一个桌面应用程序]，或者控制台应用程序也有React实现。