Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a69767e

Browse files
chore(update-plugins): Tue Apr 9 08:05:33 UTC 2024
1 parent 2cbf90e commit a69767e

File tree

1 file changed

+128
-10
lines changed

1 file changed

+128
-10
lines changed

‎plugins/swift-ui.md

Lines changed: 128 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,23 @@ Use SwiftUI with NativeScript.
1414

1515
## Contents
1616

17-
- [Installation](#installation)
18-
- [Usage](#usage)
19-
1. [Create your SwiftUI view](#1-create-your-swiftui-view)
20-
2. [Create your SwiftUI view Provider](#2-create-your-swiftui-view-provider)
21-
3. [Register your SwiftUI with an identifier and use it in the markup](#3-register-your-swiftui-with-an-identifier-and-use-it-in-markup)
22-
- [Core](#core)
23-
- [Generate Types](#generate-types)
24-
- [SwiftUI with Angular](#swiftui-with-angular)
25-
- [SwiftUI with Vue](#swiftui-with-vue)
26-
- [SwiftUI with React](#swiftui-with-react)
17+
- [@nativescript/swift-ui](#nativescriptswift-ui)
18+
- [Contents](#contents)
19+
- [Installation](#installation)
20+
- [Usage](#usage)
21+
- [1. Create your SwiftUI view](#1-create-your-swiftui-view)
22+
- [2. Create your SwiftUI view Provider](#2-create-your-swiftui-view-provider)
23+
- [3. Register your SwiftUI with an identifier and use it in markup](#3-register-your-swiftui-with-an-identifier-and-use-it-in-markup)
24+
- [Core](#core)
25+
- [Generate Types](#generate-types)
26+
- [SwiftUI with Angular](#swiftui-with-angular)
27+
- [SwiftUI with Vue](#swiftui-with-vue)
28+
- [SwiftUI with React](#swiftui-with-react)
29+
- [Open Multiple Scenes](#open-multiple-scenes)
30+
- [Passing contextual data to scenes](#passing-contextual-data-to-scenes)
31+
- [Closing windows](#closing-windows)
32+
- [Credits](#credits)
33+
- [License](#license)
2734

2835
## Installation
2936

@@ -241,8 +248,119 @@ Then use it in markup as follows:
241248
</stackLayout>
242249
```
243250

251+
## Open Multiple Scenes
252+
253+
When using a SwiftUI App Lifecycle setup for your NativeScript app, _the default with_ [visionOS](https://docs.nativescript.org/guide/visionos) _development_, you can enable multiple scenes in your `Info.plist` with the following:
254+
255+
```xml
256+
<key>UIApplicationSceneManifest</key>
257+
<dict>
258+
<key>UIApplicationPreferredDefaultSceneSessionRole</key>
259+
<string>UIWindowSceneSessionRoleApplication</string>
260+
<key>UIApplicationSupportsMultipleScenes</key>
261+
<true/>
262+
<key>UISceneConfigurations</key>
263+
<dict/>
264+
</dict>
265+
```
266+
267+
You can now use `WindowManager` (for use with standard Windows) or `XR` (for use with immersive spaces) to interact with multiple scenes, for example:
268+
269+
```swift
270+
@main
271+
struct NativeScriptApp: App {
272+
@State private var immersionStyle: ImmersionStyle = .mixed
273+
274+
var body: some Scene {
275+
NativeScriptMainWindow()
276+
277+
WindowGroup(id: "NeatView") {
278+
NeatView()
279+
}
280+
.windowStyle(.plain)
281+
282+
ImmersiveSpace(id: "NeatImmersive") {
283+
NeatImmersive()
284+
}
285+
.immersionStyle(selection: $immersionStyle, in: .mixed, .full)
286+
}
287+
}
288+
```
289+
290+
You could open the `WindowGroup` with:
291+
292+
```ts
293+
import { WindowManager } from "@nativescript/swift-ui";
294+
295+
WindowManager.getWindow("NeatView").open();
296+
});
297+
```
298+
299+
And you could open the `ImmersiveSpace` with:
300+
301+
```ts
302+
import { XR } from '@nativescript/swift-ui'
303+
304+
XR.requestSession('NeatImmersive')
305+
```
306+
307+
You could update either scene with:
308+
309+
```ts
310+
import { WindowManager } from '@nativescript/swift-ui'
311+
312+
// Option A: inline
313+
WindowManager.getWindow('NeatView').update({
314+
title: 'Updated Title'
315+
})
316+
317+
// Option B: reference
318+
const neatView = WindowManager.getWindow('NeatView')
319+
320+
neatView.update({
321+
title: 'Updated Title'
322+
})
323+
324+
// Both options work with XR/Immersive Spaces as well, for example:
325+
WindowManager.getWindow('NeatImmersive').update({
326+
salutation: 'Hello World'
327+
})
328+
```
329+
330+
### Passing contextual data to scenes
331+
332+
You can use the `onReceive` modifier in SwiftUI to handle any data passed to your windows.
333+
334+
For example, anytime `WindowManager.getWindow("Window_ID").update(...)` is called, a Notification is dispatched which can be picked up for data to be handled:
335+
336+
```swift
337+
struct NeatView: View {
338+
@State var context: NativeScriptWindowContext?
339+
340+
var body: some View {
341+
ZStack {
342+
// more neat views here
343+
}.onReceive(NotificationCenter.default.publisher(for: NSNotification.Name("NativeScriptWindowUpdate")), perform: { obj in
344+
context = NativeScriptWindowFactory.shared.getContextForId(id: "NeatView")
345+
346+
let title = context!.data["title"] as! String
347+
348+
// use your updated title!
349+
})
350+
}
351+
}
352+
```
353+
354+
### Closing windows
355+
356+
`WindowManager.getWindow("NeatView").close()` for a Window which is already open will close it.
357+
358+
`XR.endSession()` for an Immersive Space which is already open will close it.
359+
244360
## Credits
245361

362+
- WindowManager and XR APIs were established with the Callstack team. Shoutout to: [Oskar Kwaśniewski](https://github.com/okwasniewski).
363+
246364
<img src="https://raw.githubusercontent.com/valor-software/.github/d947b8547a9d5a6021e4f6af7b1df816c1c5f268/profile/valor-logo%20for-light.png#gh-light-mode-only" alt="Valor Software" width="200" />
247365

248366
NativeScript is proudly supported by Valor Software as an official partner. We are proud to offer guidance, consulting, and development assistance in all things NativeScript.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /