callstack / callstack/react-native-brownfield

popToNative closes all React Native screens

Đang mở
#354 0 bình luận 1 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
TypeScript
Star
547
Fork
52
Merge trung bình
3 ngày 16 giờ
Pull request đã merge (30 ngày)
5

Mô tả

Hello,

I've been using react-native-brownfield for a while now and recently we added a new module inside the RNApp project.
A module is a separate stack which comes with its own screens and logic. Normally these modules should be as isolated as possible one from another.
The way I implemented the module is by using the NavigationContainer and the Stack.Navigator from react-navigation.

For testing purposes I've made a new SwiftUI view that allows me to navigate to each module based on the initialModule prop, and from React Native I am passing the prop to NavigationContainer's initialRouteName prop.

Now, just like in the attached video, if I navigate on Home module, then on Settings [native screen], then on Contact [RN screen], and then press the back button [which calls popToNative], it will close all the screens. Basically popToNative closes all the React Native screens.

I am not sure if this is the expected behavior or if it's a bug. I would expect popToNative to close only the React Native screens that are on the top of the stack.

Here is the code I am using:

```swift
import Brownie
import ReactBrownfield
import SwiftUI
import UIKit

enum HomeDestination: Hashable {
case rnHome
case nativeSettings
case rnContact
}

@available(iOS 16.0, *)
struct ContentView: View {
@State private var path = NavigationPath()

var body: some View {
ZStack(alignment: .topTrailing) {
NavigationStack(path: $path) {
Color(UIColor.systemBackground)
.ignoresSafeArea()
.navigationBarHidden(true)
.navigationDestination(for: HomeDestination.self) { dest in
destinationView(for: dest)
}
}

FloatingHomeButtons { destination in
path.append(destination)
}
.padding(16)
}
}

@ViewBuilder
private func destinationView(for dest: HomeDestination) -> some View {
switch dest {
case .rnHome:
RNScreen(initialModule: "Home")
case .nativeSettings:
SettingsScreen()
case .rnContact:
RNScreen(initialModule: "Contact")
}
}
}

private struct FloatingHomeButtons: View {
let onSelect: (HomeDestination) -> Void

var body: some View {
VStack(alignment: .trailing, spacing: 12) {
Button("Open RN-Home") { onSelect(.rnHome) }
.buttonStyle(.borderedProminent)

Button("Open Native-Settings") { onSelect(.nativeSettings) }
.buttonStyle(.borderedProminent)

Button("Open RN-Contact") { onSelect(.rnContact) }
.buttonStyle(.borderedProminent)
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
.allowsHitTesting(true)
}
}

struct RNScreen: View {
let initialModule: String

var body: some View {
ReactNativeView(
moduleName: "RNApp",
initialProperties: [
"nativeOsVersionLabel":
"\(UIDevice.current.systemName) \(UIDevice.current.systemVersion)",
"initialModule": initialModule
]
)
.ignoresSafeArea()
.navigationBarHidden(true)
}
}

@available(iOS 16.0, *)
#Preview {
ContentView()
}
```

```tsx
export default function App({
nativeOsVersionLabel,
initialModule = 'Home',
}: AppProps) {
const initialRouteName: InitialModule =
initialModule === 'Contact' ? 'Contact' : 'Home';

return (








);
}
```

## Reproducible Demo

https://github.com/user-attachments/assets/988917ba-31a1-45a1-8e16-d5513f3f593b

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu bằng cách tái hiện bản demo được liên kết và lần theo luồng của nút quay lại gọi popToNative cùng với SwiftUI NavigationStack và các đích RNScreen được hiển thị trong issue. Công việc được xem là hoàn tất khi popToNative chỉ đóng các màn hình React Native ở đầu stack, đồng thời giữ nguyên màn hình native và trạng thái điều hướng bên dưới.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react-native, swift, typescript
Lĩnh vực
mobile-dev
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
48/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.