Sfoglia il codice sorgente

fix(windows): Add postMessage for Windows WebView (#1263 by @kaiguo)

Kai Guo 4 anni fa
parent
commit
e402e739ea
No account linked to committer's email address

+ 8
- 0
docs/Reference.md Vedi File

@@ -80,6 +80,7 @@ This document lays out the current public properties and methods for the React N
80 80
 - [`clearCache`](Reference.md#clearCache)
81 81
 - [`clearHistory`](Reference.md#clearHistory)
82 82
 - [`requestFocus`](Reference.md#requestFocus)
83
+- [`postMessage`](Reference.md#postMessage)
83 84
 
84 85
 ---
85 86
 
@@ -1240,6 +1241,13 @@ requestFocus();
1240 1241
 
1241 1242
 Request the webView to ask for focus. (People working on TV apps might want having a look at this!)
1242 1243
 
1244
+### `postMessage(str)`
1245
+
1246
+```javascript
1247
+postMessage('message');
1248
+```
1249
+Post a message to WebView, handled by [`onMessage`](Reference.md#onmessage).
1250
+
1243 1251
 ### `clearFormData()`
1244 1252
 
1245 1253
 (android only)

+ 8
- 0
src/WebView.windows.tsx Vedi File

@@ -104,6 +104,14 @@ export default class WebView extends React.Component<WebViewSharedProps, State>
104 104
     );
105 105
   }
106 106
 
107
+  postMessage = (data: string) => {
108
+    UIManager.dispatchViewManagerCommand(
109
+      this.getWebViewHandle(),
110
+      UIManager.getViewManagerConfig('RCTWebView').Commands.postMessage,
111
+      [String(data)],
112
+    );
113
+  };
114
+
107 115
   /**
108 116
    * We return an event with a bunch of fields including:
109 117
    *  url, title, loading, canGoBack, canGoForward

+ 5
- 7
windows/ReactNativeWebView/ReactNativeWebView.vcxproj Vedi File

@@ -63,9 +63,11 @@
63 63
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.props" />
64 64
   <ImportGroup Label="ExtensionSettings">
65 65
   </ImportGroup>
66
+  <PropertyGroup>
67
+    <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\</ReactNativeWindowsDir>
68
+  </PropertyGroup>
66 69
   <ImportGroup Label="Shared">
67
-    <Import Project="..\..\..\react-native-windows\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems" Label="Shared" Condition="Exists('..\..\..\react-native-windows\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems')" />
68
-    <Import Project="..\..\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems" Label="Shared" Condition="Exists('..\..\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems')"/>
70
+    <Import Project="$(ReactNativeWindowsDir)\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems" Label="Shared" />
69 71
   </ImportGroup>
70 72
   <ImportGroup Label="PropertySheets">
71 73
     <Import Project="$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props" Condition="exists('$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props')" Label="LocalAppDataPlatform" />
@@ -139,11 +141,7 @@
139 141
     <None Include="PropertySheet.props" />
140 142
   </ItemGroup>
141 143
   <ItemGroup>
142
-    <ProjectReference Include="..\..\..\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj" Condition="Exists('..\..\..\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj')">
143
-      <Project>{f7d32bd0-2749-483e-9a0d-1635ef7e3136}</Project>
144
-      <Private>false</Private>
145
-    </ProjectReference>
146
-    <ProjectReference Include="..\..\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj" Condition="Exists('..\..\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj')">
144
+    <ProjectReference Include="$(ReactNativeWindowsDir)\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj">
147 145
       <Project>{f7d32bd0-2749-483e-9a0d-1635ef7e3136}</Project>
148 146
       <Private>false</Private>
149 147
     </ProjectReference>

+ 5
- 1
windows/ReactNativeWebView/ReactWebView.cpp Vedi File

@@ -128,14 +128,18 @@ namespace winrt::ReactNativeWebView::implementation {
128 128
                 return;
129 129
             }
130 130
         }
131
+        
132
+        PostMessage(winrt::hstring(args.Value()));
133
+    }
131 134
 
135
+    void ReactWebView::PostMessage(winrt::hstring const& message) {
132 136
         m_reactContext.DispatchEvent(
133 137
             m_webView,
134 138
             L"topMessage",
135 139
             [&](winrt::Microsoft::ReactNative::IJSValueWriter const& eventDataWriter) noexcept {
136 140
                 eventDataWriter.WriteObjectBegin();
137 141
                 {
138
-                    WriteProperty(eventDataWriter, L"data", winrt::to_string(args.Value()));
142
+                    WriteProperty(eventDataWriter, L"data", message);
139 143
                 }
140 144
                 eventDataWriter.WriteObjectEnd();
141 145
             });

+ 1
- 0
windows/ReactNativeWebView/ReactWebView.h Vedi File

@@ -13,6 +13,7 @@ namespace winrt::ReactNativeWebView::implementation {
13 13
     public:
14 14
         ReactWebView(Microsoft::ReactNative::IReactContext const& reactContext);
15 15
         winrt::Windows::UI::Xaml::Controls::WebView GetView();
16
+        void PostMessage(winrt::hstring const& message);
16 17
 
17 18
     private:
18 19
         winrt::Windows::UI::Xaml::Controls::WebView m_webView{ nullptr };

+ 1
- 0
windows/ReactNativeWebView/ReactWebView.idl Vedi File

@@ -3,5 +3,6 @@ namespace ReactNativeWebView{
3 3
     runtimeclass ReactWebView : Windows.UI.Xaml.Controls.UserControl{
4 4
         ReactWebView(Microsoft.ReactNative.IReactContext context);
5 5
         Windows.UI.Xaml.Controls.WebView GetView();
6
+        void PostMessage(String message);
6 7
     };
7 8
 } // namespace ReactNativeWebView

+ 3
- 0
windows/ReactNativeWebView/ReactWebViewManager.cpp Vedi File

@@ -108,6 +108,7 @@ namespace winrt::ReactNativeWebView::implementation {
108 108
         commands.Append(L"reload");
109 109
         commands.Append(L"stopLoading");
110 110
         commands.Append(L"injectJavaScript");
111
+        commands.Append(L"postMessage");
111 112
         return commands.GetView();
112 113
     }
113 114
 
@@ -135,6 +136,8 @@ namespace winrt::ReactNativeWebView::implementation {
135 136
             }
136 137
             else if (commandId == L"injectJavaScript") {
137 138
                 webView.InvokeScriptAsync(L"eval", { winrt::to_hstring(commandArgs[0].AsString()) });
139
+            } else if(commandId == L"postMessage") {
140
+                m_reactWebView.PostMessage(winrt::to_hstring(commandArgs[0].AsString()));
138 141
             }
139 142
         }
140 143
     }