使用 HostingController 的 SwiftUI 视图无法正确剪辑到 ExpoView 中的边界

Question

SwiftUI 视图似乎在 ExpoView 的顶部被裁剪掉（参见图片）。相反，我希望它能限制在边界内。有人可以重现或告诉我如何解决该问题吗？

我使用了以下 SwiftUI View（示例来自互联网）。

struct MySwiftUIView: View {
    var name = ""
    var options: [String] = []
    @State var isOpen = false
    @State var picker = 0
    @State var slider = 50.0
    @State var isScaled = false
    
    var body: some View {
        NavigationView {
            if #available(iOS 14.0, *) {
                ScrollView {
                    VStack(spacing: 20) {
                        Text("SwiftUI + Expo!")
                            .font(.largeTitle)
                            .scaleEffect(isScaled ? 1.5 : 1.0)
                            .foregroundColor(isScaled ? .purple : .black)
                    
                        Button("Animations work too!") {
                            withAnimation {
                                isScaled.toggle()
                            }
                        }
                    
                        
                        NavigationLink("To Details") {
                            Text("Details")
                        }
                        Picker("Picker", selection: $picker, content: {
                            ForEach(Array(options.enumerated()), id: \.1) { index, option in
                                Text(option)
                                    .tag(index)
                            }
                        }).pickerStyle(.segmented)
                        
                        if #available(iOS 16.0, *) {
                            Button("Toggle Sheet") {
                                isOpen.toggle()
                            }.sheet(isPresented: $isOpen) {
                                Text("Sheet content")
                                    .presentationDetents([.medium, .large])
                            }.padding(.bottom, 100)
                        }
                    }
                    
                }.navigationTitle(Text("Home"))
            }
        }
    }
}

这是设置 HostingController 并配置视图约束的 ExpoView。

class SwiftuiView: ExpoView {
    let hostingController = UIHostingController(rootView: MySwiftUIView())

    required init(appContext: AppContext? = nil) {
        super.init(appContext: appContext)
        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
        addSubview(hostingController.view)
        NSLayoutConstraint.activate([
            hostingController.view.topAnchor.constraint(equalTo: self.topAnchor),
            hostingController.view.bottomAnchor.constraint(equalTo: self.bottomAnchor),
            hostingController.view.leftAnchor.constraint(equalTo: self.leftAnchor),
            hostingController.view.rightAnchor.constraint(equalTo: self.rightAnchor)
        ])
    }
}

使用： 世博 SDK 50 iOS 16

Answer 1

因此，在收到社区的帮助后，只需将 flex:1 或 height: 100% 添加到本机视图即可解决问题。

export default function ExpoNativeView() {
    return <NativeView style={{ height: '100%' }} />;
}