はネイティブリアクト：私は使用していますWebSocketを

Question

上のカスタムクライアントを実装するには、自分のアプリケーションをネイティブに反応して、下記の私の理解あたりとしてネイティブなアーキテクチャに

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ランタイムへのカスタムクライアントを定義することです。

WebSocketを介してネイティブサーバーに応答するために接続するクライアントがあると仮定すると、サーバーは、クライアントが希望の仮想DOMをクライアントにプッシュし、クライアントがDOMを使用して何かを実行します。また、クライアントは、クライアントおよび他のイベントをサーバに戻し、サーバは、反応コンポーネントクラス内の対応するハンドラを認識して呼び出す。

私はフードビデオの下でthisが反応するのを見ましたが、私は確かにそれが可能であることを知っていますが、どこから始めるべきかを理解することはできません。

Thisガイドは、私が探しているものに似ていますが、running the appの代わりに、アンドロイドや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" 
    } 
} 

Answer 1

のようなものを探しています。具体的に。私が反応ネイティブを追加したいことの1つは、JavascriptとReact Frameworkスタイルでios/androidアプリケーションを作成する方法です。だからコンソールアプリケーションを作成したい場合はReact with Electron [デスクトップアプリケーションが必要な場合]またはコンソールアプリケーションのリアクション実装があります。