diff --git a/.github/workflows/windows-app-test.yml b/.github/workflows/windows-app-test.yml new file mode 100644 index 00000000..5d1f1f15 --- /dev/null +++ b/.github/workflows/windows-app-test.yml @@ -0,0 +1,39 @@ +name: Windows CI +on: [pull_request] + +jobs: + run-windows-tests: + name: Build & run tests + runs-on: windows-2019 + + steps: + - uses: actions/checkout@v2 + name: Checkout Code + + - name: Setup Node.js + uses: actions/setup-node@v1 + with: + node-version: '12.18.3' + + - name: Setup MSBuild + uses: microsoft/setup-msbuild@v1 + with: + vs-version: 16.8 + + - name: Install example modules + run: | + cd examples + yarn --pure-lockfile + - name: Build release + run: | + cd examples + npx react-native run-windows --release --no-packager --no-launch --logging + - name: Start Appium server + shell: powershell + run: | + cd examples + Start-Process PowerShell -ArgumentList "yarn appium" + - name: Run tests + run: | + cd examples + yarn test:windows diff --git a/README.md b/README.md index af58078b..a013ff03 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ [ ![原理 解析](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) [ ![Flutter](https://img.shields.io/badge/Flutter-brightgreen.svg)](https://github.com/crazycodeboy/flutter_splash_screen) -A splash screen API for react-native which can programatically hide and show the splash screen. Works on iOS and Android. +A splash screen API for react-native which can programatically hide and show the splash screen. Works on iOS, Android and Windows. ## Content @@ -112,6 +112,20 @@ public class MainApplication extends Application implements ReactApplication { `$(SRCROOT)/../node_modules/react-native-splash-screen/ios` +**Windows:** + +##### Automatic install with autolinking on RNW +RNSplashScreen supports autolinking. Just call: `yarn add react-native-splash-screen` + +##### Manual installation on RNW +1. `yarn add react-native-splash-screen` +2. Open your solution in Visual Studio 2019 (eg. `windows\yourapp.sln`) +3. Right-click Solution icon in Solution Explorer > Add > Existing Project... +4. Add `node_modules\[module name here]\windows\RNSplashScreen\RNSplashScreen.vcxproj` +5. Right-click main application project > Add > Reference... +6. Select `RNSplashScreen` in Solution Projects +7. In app `pch.h` add `#include "winrt/RNSplashScreen.h"` +8. In `App.cpp` add `PackageProviders().Append(winrt::RNSplashScreen::ReactPackageProvider());` before `InitializeComponent();` ### Third step(Plugin Configuration): @@ -165,6 +179,43 @@ Update `AppDelegate.m` with the following additions: ``` +**Windows:** + +On Windows, `react-native-splash-screen` will use an element in the visual tree to show the splash screen, a XAML `RNSplashScreen::RNSplashScreenControl`. + +To add this element, follow the following steps: + +1. In the application's `pch.h` file, add `#include "winrt/RNSplashScreen.h"` if you haven't already. + +2. In the application's main XAML file, add a `RNSplashScreen::RNSplashScreenControl` element right beneath the `react:ReactRootView` element. + +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: +```xaml + + + +``` +to +```xaml + + + + + + +``` + ## Getting started Import `react-native-splash-screen` in your JS file. @@ -257,6 +308,14 @@ Customize your splash screen via `LaunchScreen.storyboard` or `LaunchScreen.xib` - [via LaunchScreen.storyboard Tutorial](https://github.com/crazycodeboy/react-native-splash-screen/blob/master/add-LaunchScreen-tutorial-for-ios.md) +### Windows + +`react-native-splash-screen` will use the splash screen image and background color defined in the application's `Package.appxmanifest` file. + +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. + +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. + ## Usage Use like so: diff --git a/examples/.flowconfig b/examples/.flowconfig index 786366c4..b274ad1d 100644 --- a/examples/.flowconfig +++ b/examples/.flowconfig @@ -56,7 +56,6 @@ untyped-type-import=warn nonstrict-import=warn deprecated-type=warn unsafe-getters-setters=warn -inexact-spread=warn unnecessary-invariant=warn signature-verification-failure=warn deprecated-utility=error @@ -71,4 +70,4 @@ untyped-import untyped-type-import [version] -^0.113.0 +^0.122.0 diff --git a/examples/.gitignore b/examples/.gitignore index ad572e63..a524403e 100644 --- a/examples/.gitignore +++ b/examples/.gitignore @@ -57,3 +57,9 @@ buck-out/ # CocoaPods /ios/Pods/ + +# MSBuild Binary and Structured Log +*.binlog + +# Debug log +debug.log diff --git a/examples/App.js b/examples/App.js index a6a34d3d..17628613 100644 --- a/examples/App.js +++ b/examples/App.js @@ -17,6 +17,8 @@ import { Text, TouchableOpacity, Linking, + Button, + Platform, } from 'react-native' import SplashScreen from 'react-native-splash-screen' @@ -26,30 +28,41 @@ export default class example extends Component { SplashScreen.hide(); } - render() { return ( - { - Linking.openURL('https://coding.imooc.com/class/304.html'); - }} - > - - - SplashScreen 启动屏 - - - @:http://www.devio.org/ - - - GitHub:https://github.com/crazycodeboy - - - Email:crazycodeboy@gmail.com - - - + + { + Linking.openURL('https://coding.imooc.com/class/304.html'); + }} + > + + + SplashScreen 启动屏 + + + @:http://www.devio.org/ + + + GitHub:https://github.com/crazycodeboy + + + Email:crazycodeboy@gmail.com + + + + { + // Show splash screen again on Windows and Android, for 3s. + (Platform.OS === 'windows' || Platform.OS === 'android') && + +