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

This commit is contained in:
Kai Guo 2020-05-29 13:19:11 -07:00 committed by GitHub
parent 1789b79064
commit e402e739ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 31 additions and 8 deletions

View File

@ -80,6 +80,7 @@ This document lays out the current public properties and methods for the React N
- [`clearCache`](Reference.md#clearCache)
- [`clearHistory`](Reference.md#clearHistory)
- [`requestFocus`](Reference.md#requestFocus)
- [`postMessage`](Reference.md#postMessage)
---
@ -1240,6 +1241,13 @@ requestFocus();
Request the webView to ask for focus. (People working on TV apps might want having a look at this!)
### `postMessage(str)`
```javascript
postMessage('message');
```
Post a message to WebView, handled by [`onMessage`](Reference.md#onmessage).
### `clearFormData()`
(android only)

View File

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

View File

@ -63,9 +63,11 @@
<Import Project="$(VCTargetsPath)\Microsoft.Cpp.props" />
<ImportGroup Label="ExtensionSettings">
</ImportGroup>
<PropertyGroup>
<ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\</ReactNativeWindowsDir>
</PropertyGroup>
<ImportGroup Label="Shared">
<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')" />
<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')"/>
<Import Project="$(ReactNativeWindowsDir)\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems" Label="Shared" />
</ImportGroup>
<ImportGroup Label="PropertySheets">
<Import Project="$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props" Condition="exists('$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props')" Label="LocalAppDataPlatform" />
@ -139,11 +141,7 @@
<None Include="PropertySheet.props" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\..\..\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj" Condition="Exists('..\..\..\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj')">
<Project>{f7d32bd0-2749-483e-9a0d-1635ef7e3136}</Project>
<Private>false</Private>
</ProjectReference>
<ProjectReference Include="..\..\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj" Condition="Exists('..\..\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj')">
<ProjectReference Include="$(ReactNativeWindowsDir)\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj">
<Project>{f7d32bd0-2749-483e-9a0d-1635ef7e3136}</Project>
<Private>false</Private>
</ProjectReference>

View File

@ -128,14 +128,18 @@ namespace winrt::ReactNativeWebView::implementation {
return;
}
}
PostMessage(winrt::hstring(args.Value()));
}
void ReactWebView::PostMessage(winrt::hstring const& message) {
m_reactContext.DispatchEvent(
m_webView,
L"topMessage",
[&](winrt::Microsoft::ReactNative::IJSValueWriter const& eventDataWriter) noexcept {
eventDataWriter.WriteObjectBegin();
{
WriteProperty(eventDataWriter, L"data", winrt::to_string(args.Value()));
WriteProperty(eventDataWriter, L"data", message);
}
eventDataWriter.WriteObjectEnd();
});

View File

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

View File

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

View File

@ -108,6 +108,7 @@ namespace winrt::ReactNativeWebView::implementation {
commands.Append(L"reload");
commands.Append(L"stopLoading");
commands.Append(L"injectJavaScript");
commands.Append(L"postMessage");
return commands.GetView();
}
@ -135,6 +136,8 @@ namespace winrt::ReactNativeWebView::implementation {
}
else if (commandId == L"injectJavaScript") {
webView.InvokeScriptAsync(L"eval", { winrt::to_hstring(commandArgs[0].AsString()) });
} else if(commandId == L"postMessage") {
m_reactWebView.PostMessage(winrt::to_hstring(commandArgs[0].AsString()));
}
}
}