Skip to content

Commit 7ca7ba9

Browse files
jaimecbernardojaimecbernardo
committed
windows: Add Windows support
1 parent d4e860d commit 7ca7ba9

22 files changed

+5792
-3
lines changed

‎README.md‎

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
[ ![原理 解析](https://img.shields.io/badge/原理-解析-brightgreen.svg)](https://github.com/crazycodeboy/RNStudyNotes/blob/master/React%20Native%20%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E5%90%88%E9%9B%86/React%20Native%20%E5%90%AF%E5%8A%A8%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%95%99%E7%A8%8B/React%20Native%20%E5%90%AF%E5%8A%A8%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%95%99%E7%A8%8B.md)
1010
[ ![Flutter](https://img.shields.io/badge/Flutter-brightgreen.svg)](https://github.com/crazycodeboy/flutter_splash_screen)
1111

12-
A splash screen API for react-native which can programatically hide and show the splash screen. Works on iOS and Android.
12+
A splash screen API for react-native which can programatically hide and show the splash screen. Works on iOS, Android and Windows.
1313

1414
## Content
1515

@@ -112,6 +112,20 @@ public class MainApplication extends Application implements ReactApplication {
112112
`$(SRCROOT)/../node_modules/react-native-splash-screen/ios`
113113

114114

115+
**Windows:**
116+
117+
##### Automatic install with autolinking on RNW
118+
RNSplashScreen supports autolinking. Just call: `yarn add react-native-splash-screen`
119+
120+
##### Manual installation on RNW
121+
1. `yarn add react-native-splash-screen`
122+
2. Open your solution in Visual Studio 2019 (eg. `windows\yourapp.sln`)
123+
3. Right-click Solution icon in Solution Explorer > Add > Existing Project...
124+
4. Add `node_modules\[module name here]\windows\RNSplashScreen\RNSplashScreen.vcxproj`
125+
5. Right-click main application project > Add > Reference...
126+
6. Select `RNSplashScreen` in Solution Projects
127+
7. In app `pch.h` add `#include "winrt/RNSplashScreen.h"`
128+
8. In `App.cpp` add `PackageProviders().Append(winrt::RNSplashScreen::ReactPackageProvider());` before `InitializeComponent();`
115129

116130
### Third step(Plugin Configuration):
117131

@@ -165,6 +179,43 @@ Update `AppDelegate.m` with the following additions:
165179

166180
```
167181
182+
**Windows:**
183+
184+
On Windows, `react-native-splash-screen` will use an element in the visual tree to show the splash screen, a XAML `RNSplashScreen::RNSplashScreenControl`.
185+
186+
To add this element, follow the following steps:
187+
188+
1. In the application's `pch.h` file, add `#include "winrt/RNSplashScreen.h"` if you haven't already.
189+
190+
2. In the application's main XAML file, add a `RNSplashScreen::RNSplashScreenControl` element right beneath the `react:ReactRootView` element.
191+
192+
As an example, in `windows/myapp/MainPage.xaml` from the `react-native-windows` app template this can be done by adding a XAML `Grid` with a `RNSplashScreen::RNSplashScreenControl` alongside the `ReactRootView`. Change `windows/myapp/MainPage.xaml` from:
193+
```xaml
194+
<Page
195+
...
196+
>
197+
<react:ReactRootView
198+
x:Name="ReactRootView"
199+
...
200+
/>
201+
</Page>
202+
```
203+
to
204+
```xaml
205+
<Page
206+
...
207+
xmlns:rnsplashscreen="using:RNSplashScreen"
208+
>
209+
<Grid>
210+
<react:ReactRootView
211+
x:Name="ReactRootView"
212+
...
213+
/>
214+
<rnsplashscreen:RNSplashScreenControl/>
215+
</Grid>
216+
</Page>
217+
```
218+
168219
## Getting started
169220

170221
Import `react-native-splash-screen` in your JS file.
@@ -257,6 +308,14 @@ Customize your splash screen via `LaunchScreen.storyboard` or `LaunchScreen.xib`
257308
- [via LaunchScreen.storyboard Tutorial](https://github.com/crazycodeboy/react-native-splash-screen/blob/master/add-LaunchScreen-tutorial-for-ios.md)
258309

259310

311+
### Windows
312+
313+
`react-native-splash-screen` will use the splash screen image and background color defined in the application's `Package.appxmanifest` file.
314+
315+
Since UWP applications already have a splash screen, this makes it so that the splash screen is extended into the `react-native-windows` load process.
316+
317+
To configure the UWP splash screen, open `windows/myapp/Package.appxmanifest` in Visual Studio, open the `Visual Assets` tab and the `Splash Screen` horizontal tab. Add a Splash Screen image and define a background color.
318+
260319
## Usage
261320

262321
Use like so:

‎package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-native-splash-screen",
33
"version": "3.2.0",
4-
"description": "A splash screen for react-native, hide when application loaded ,it works on iOS and Android.",
4+
"description": "A splash screen for react-native, hide when application loaded ,it works on iOS, Android and Windows.",
55
"main": "index.js",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1"
@@ -30,5 +30,9 @@
3030
"peerDependencies": {
3131
"react-native": ">=0.57.0"
3232
},
33-
"homepage": "https://github.com/crazycodeboy/react-native-splash-screen#readme"
33+
"homepage": "https://github.com/crazycodeboy/react-native-splash-screen#readme",
34+
"devDependencies": {
35+
"react-native": "^0.63.4",
36+
"react-native-windows": "^0.63.14"
37+
}
3438
}

‎windows/.gitignore‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
*AppPackages*
2+
*BundleArtifacts*
3+
4+
#OS junk files
5+
[Tt]humbs.db
6+
*.DS_Store
7+
8+
#Visual Studio files
9+
*.[Oo]bj
10+
*.user
11+
*.aps
12+
*.pch
13+
*.vspscc
14+
*.vssscc
15+
*_i.c
16+
*_p.c
17+
*.ncb
18+
*.suo
19+
*.tlb
20+
*.tlh
21+
*.bak
22+
*.[Cc]ache
23+
*.ilk
24+
*.log
25+
*.lib
26+
*.sbr
27+
*.sdf
28+
*.opensdf
29+
*.opendb
30+
*.unsuccessfulbuild
31+
ipch/
32+
[Oo]bj/
33+
[Bb]in
34+
[Dd]ebug*/
35+
[Rr]elease*/
36+
Ankh.NoLoad
37+
38+
# Visual C++ cache files
39+
ipch/
40+
*.aps
41+
*.ncb
42+
*.opendb
43+
*.opensdf
44+
*.sdf
45+
*.cachefile
46+
*.VC.db
47+
*.VC.VC.opendb
48+
49+
#MonoDevelop
50+
*.pidb
51+
*.userprefs
52+
53+
#Tooling
54+
_ReSharper*/
55+
*.resharper
56+
[Tt]est[Rr]esult*
57+
*.sass-cache
58+
59+
#Project files
60+
[Bb]uild/
61+
62+
#Subversion files
63+
.svn
64+
65+
# Office Temp Files
66+
~$*
67+
68+
# vim Temp Files
69+
*~
70+
71+
#NuGet
72+
packages/
73+
*.nupkg
74+
75+
#ncrunch
76+
*ncrunch*
77+
*crunch*.local.xml
78+
79+
# visual studio database projects
80+
*.dbmdl
81+
82+
#Test files
83+
*.testsettings
84+
85+
#Other files
86+
*.DotSettings
87+
.vs/
88+
*project.lock.json
89+
90+
#Files generated by the VS build
91+
**/Generated Files/**
92+

‎windows/README.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# [module name here] Windows Implementation
2+
3+
## Module Installation
4+
You can either use autolinking on react-native-windows 0.63 and later or manually link the module on earlier releases.
5+
6+
## Automatic install with autolinking on RNW
7+
RNSplashScreen supports autolinking. Just call: `yarn add react-native-splash-screen`
8+
9+
## Manual installation on RNW
10+
1. `yarn add react-native-splash-screen`
11+
2. Open your solution in Visual Studio 2019 (eg. `windows\yourapp.sln`)
12+
3. Right-click Solution icon in Solution Explorer > Add > Existing Project...
13+
4. Add `node_modules\[module name here]\windows\RNSplashScreen\RNSplashScreen.vcxproj`
14+
5. Right-click main application project > Add > Reference...
15+
6. Select `RNSplashScreen` in Solution Projects
16+
7. In app `pch.h` add `#include "winrt/RNSplashScreen.h"`
17+
8. In `App.cpp` add `PackageProviders().Append(winrt::RNSplashScreen::ReactPackageProvider());` before `InitializeComponent();`
18+
19+
## Windows splash screen visual element
20+
21+
On Windows, `react-native-splash-screen` will use an element in the visual tree to show the splash screen, a XAML `RNSplashScreen::RNSplashScreenControl`.
22+
23+
To add this element, follow the following steps:
24+
25+
1. In the application's `pch.h` file, add `#include "winrt/RNSplashScreen.h"` if you haven't already.
26+
27+
2. In the application's main XAML file, add a `RNSplashScreen::RNSplashScreenControl` element right beneath the `react:ReactRootView` element.
28+
29+
As an example, in `windows/myapp/MainPage.xaml` from the `react-native-windows` app template this can be done by adding a XAML `Grid` with a `RNSplashScreen::RNSplashScreenControl` alongside the `ReactRootView`. Change `windows/myapp/MainPage.xaml` from:
30+
```xaml
31+
<Page
32+
...
33+
>
34+
<react:ReactRootView
35+
x:Name="ReactRootView"
36+
...
37+
/>
38+
</Page>
39+
```
40+
to
41+
```xaml
42+
<Page
43+
...
44+
xmlns:rnsplashscreen="using:RNSplashScreen"
45+
>
46+
<Grid>
47+
<react:ReactRootView
48+
x:Name="ReactRootView"
49+
...
50+
/>
51+
<rnsplashscreen:RNSplashScreenControl/>
52+
</Grid>
53+
</Page>
54+
```
55+
56+
3. `react-native-splash-screen` will use the splash screen image and background color defined in the application's `Package.appxmanifest` file.
57+
58+
Open `windows/myapp/Package.appxmanifest` in Visual Studio, open the `Visual Assets` tab and the `Splash Screen` horizontal tab. Add a Splash Screen image and define a background color.
59+
60+
## Module development
61+
62+
If you want to contribute to this module Windows implementation, first you must install the [Windows Development Dependencies](https://aka.ms/rnw-deps).
63+
64+
You must temporarily install the `react-native-windows` package. Versions of `react-native-windows` and `react-native` must match, e.g. if the module uses `react-native@0.62`, install `yarn add react-native-windows@^0.62 --dev`.
65+
66+
Now, you will be able to open corresponding `RNSplashScreen...sln` file, e.g. `RNSplashScreen62.sln` for `react-native-windows@0.62`.

‎windows/RNSplashScreen/PropertySheet.props‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
3+
<ImportGroup Label="PropertySheets" />
4+
<PropertyGroup Label="UserMacros" />
5+
<!--
6+
To customize common C++/WinRT project properties:
7+
* right-click the project node
8+
* expand the Common Properties item
9+
* select the C++/WinRT property page
10+
11+
For more advanced scenarios, and complete documentation, please see:
12+
https://github.com/Microsoft/xlang/tree/master/src/package/cppwinrt/nuget
13+
-->
14+
<PropertyGroup />
15+
<ItemDefinitionGroup />
16+
</Project>

‎windows/RNSplashScreen/RNSplashScreen.cpp‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
#include "pch.h"
2+
#include "RNSplashScreen.h"
3+
4+
winrt::impl::com_ref<winrt::RNSplashScreen::RNSplashScreenControl> winrt::RNSplashScreen::RNSplashScreen::getSplashScreenControl()
5+
{
6+
xaml::FrameworkElement root{ nullptr };
7+
8+
auto window = xaml::Window::Current();
9+
10+
if (window != nullptr)
11+
{
12+
root = window.Content().as<xaml::FrameworkElement>();
13+
} else if (auto xamlRoot = React::XamlUIService::GetXamlRoot(reactContext.Properties().Handle()))
14+
{
15+
root = xamlRoot.Content().as<xaml::FrameworkElement>();
16+
}
17+
18+
if (!root)
19+
{
20+
return nullptr;
21+
}
22+
23+
return getSplashScreenControl(root);
24+
}
25+
26+
winrt::impl::com_ref<winrt::RNSplashScreen::RNSplashScreenControl> winrt::RNSplashScreen::RNSplashScreen::getSplashScreenControl(xaml::DependencyObject startNode)
27+
{
28+
const int count = winrt::Windows::UI::Xaml::Media::VisualTreeHelper::GetChildrenCount(startNode);
29+
winrt::impl::com_ref<winrt::RNSplashScreen::RNSplashScreenControl> result = nullptr;
30+
for (int i = 0; i < count; i++)
31+
{
32+
xaml::DependencyObject current = winrt::Windows::UI::Xaml::Media::VisualTreeHelper::GetChild(startNode, i);
33+
auto temp{ current.try_as<winrt::RNSplashScreen::RNSplashScreenControl>() };
34+
if (temp)
35+
{
36+
return temp;
37+
} else
38+
{
39+
result = getSplashScreenControl(current);
40+
if (result)
41+
{
42+
break;
43+
}
44+
}
45+
}
46+
return result;
47+
}
48+
49+
void winrt::RNSplashScreen::RNSplashScreen::Init(ReactContext const& context) noexcept
50+
{
51+
reactContext = context;
52+
}
53+
54+
void winrt::RNSplashScreen::RNSplashScreen::Show() noexcept
55+
{
56+
winrt::impl::com_ref<winrt::RNSplashScreen::RNSplashScreenControl> control = getSplashScreenControl();
57+
if (control != nullptr)
58+
{
59+
control.Opacity(1);
60+
}
61+
}
62+
63+
void winrt::RNSplashScreen::RNSplashScreen::Hide() noexcept
64+
{
65+
winrt::impl::com_ref<winrt::RNSplashScreen::RNSplashScreenControl> control = getSplashScreenControl();
66+
if (control != nullptr)
67+
{
68+
control.Opacity(0);
69+
}
70+
}

‎windows/RNSplashScreen/RNSplashScreen.def‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
EXPORTS
2+
DllCanUnloadNow = WINRT_CanUnloadNow PRIVATE
3+
DllGetActivationFactory = WINRT_GetActivationFactory PRIVATE

‎windows/RNSplashScreen/RNSplashScreen.h‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
#pragma once
2+
3+
#include "pch.h"
4+
#include "NativeModules.h"
5+
#include "RNSplashScreenControl.h"
6+
7+
using namespace winrt::Microsoft::ReactNative;
8+
9+
namespace winrt::RNSplashScreen
10+
{
11+
REACT_MODULE(RNSplashScreen, L"SplashScreen");
12+
struct RNSplashScreen
13+
{
14+
const std::string Name = "SplashScreen";
15+
ReactContext reactContext = nullptr;
16+
17+
winrt::impl::com_ref<winrt::RNSplashScreen::RNSplashScreenControl> getSplashScreenControl();
18+
winrt::impl::com_ref<winrt::RNSplashScreen::RNSplashScreenControl> getSplashScreenControl(xaml::DependencyObject startNode);
19+
20+
REACT_INIT(Init);
21+
void Init(ReactContext const& context) noexcept;
22+
23+
REACT_METHOD(Show, L"show");
24+
void Show() noexcept;
25+
26+
REACT_METHOD(Hide, L"hide");
27+
void Hide() noexcept;
28+
};
29+
}

0 commit comments

Comments
 (0)