gpt4 book ai didi

ios - React-Native iOS - 如何通过按下按钮从 React-Native View 导航到非 React-Native View ( native iOS View Controller )?

转载 作者:可可西里 更新时间:2023-11-01 03:53:17 26 4
gpt4 key购买 nike

RN doco 和其他示例展示了如何从 native iOS View Controller 启动 React-Native View ,但反之则不然。谁能解释一下我该怎么做?

最佳答案

我能够弄清楚这一点。在我的例子中,我使用一个 Obj-C 基础项目(这是 RN 的默认项目)和我自己的 Swift native View Controller 。我的解决方案在这里,以防其他人遇到这种情况:

简单地说,答案是使用 RCTBridge 模块允许 RN JavaScript 调用原生 iOS 方法。

这里是组件的大纲,然后是实现:

  1. AppDelegate.h/.m - 为初始 RN View 初始化 RN JavaScript 索引文件,同时设置将 Root View Controller 交换为 native View Controller 的方法(此方法将从 RTCBridge 模块调用。

  2. MyViewController.swift - 正常 UIViewController具有标准实现。

  3. MyProject-Bridging-Header.h - 提供 Obj-C <->快速沟通

  4. ChangeViewBridge.h/.m - 这提供了允许您从 RN JavaScript 调用 native iOS 方法的绑定(bind)。

  5. index.ios.js - 初始化您的自定义 RCTBridge 模块并调用绑定(bind)方法以通过按下按钮切换到您的 native View 。

AppDelegate.h :

#import <UIKit/UIKit.h>

@interface AppDelegate : UIResponder <UIApplicationDelegate> {
NSDictionary *options;
UIViewController *viewController;
}

@property (nonatomic, strong) UIWindow *window;

- (void) setInitialViewController;
- (void) goToRegisterView; // called from the RCTBridge module

@end

AppDelegate.m :

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "FidoTestProject-Swift.h" // Xcode generated import to reference MyViewController.swift from Obj-C

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
options = launchOptions;
[self setInitialViewController];
return YES;
}

- (void) setInitialViewController {
NSURL *jsCodeLocation;

jsCodeLocation = [NSURL URLWithString:@"http://192.168.208.152:8081/index.ios.bundle?platform=ios&dev=true"];

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"FidoTestProject" initialProperties:nil launchOptions:options];

self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;

viewController = rootViewController;

[self.window makeKeyAndVisible];
}

// this method will be called from the RCTBridge
- (void) goToNativeView {
NSLog(@"RN binding - Native View - MyViewController.swift - Load From "main" storyboard);
UIViewController *vc = [UIStoryboard storyboardWithName:@"main" bundle:nil].instantiateInitialViewController;
self.window.rootViewController = vc;
}

@end

MyViewController.swift :

class RegisterViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()
print("MyViewController loaded...")
// standard view controller will load from RN
}
}

MyProject-Bridging-Header.h :

@import Foundation;
@import UIKit;
@import CoreLocation;
@import AVFoundation;

#import "React/RCTBridge.h"
#import "React/RCTBridgeModule.h"
#import "React/RCTBundleURLProvider.h"
#import "React/RCTRootView.h"
#import "AppDelegate.h"

ChangeViewBridge.h :

#import <React/RCTBridgeModule.h>

@interface ChangeViewBridge : NSObject <RCTBridgeModule>

- (void) changeToNativeView;

@end

ChangeViewBridge.m :

#import "RegisterBridge.h"
#import "FidoTestProject-Swift.h"
#import "AppDelegate.h"

@implementation ChangeViewBridge

// reference "ChangeViewBridge" module in index.ios.js
RCT_EXPORT_MODULE(ChangeViewBridge);

RCT_EXPORT_METHOD(changeToNativeView) {
NSLog(@"RN binding - Native View - Loading MyViewController.swift");
AppDelegate *appDelegate = (AppDelegate *)[UIApplication sharedApplication].delegate;
[appDelegate goToNativeView];
}

@end

index.ios.js

/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/

'use strict';

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Alert,
Text,
View,
NativeModules,
TouchableHighlight
} from 'react-native';

export default class FidoTestProject extends Component {

constructor(props) {
super(props)
this.done = false;
}

_changeView() {
this.done = true;
this.render();
NativeModules.ChangeViewBridge.changeToNativeView();
}

render() {
if (!this.done) {
return (
<View style={styles.container}>
<TouchableHighlight onPress={() => this._changeView()}>
<Text color="#336699">
Press to Change to Native View
</Text>
</TouchableHighlight>
</View>
);
} else {
return (<View></View>);
}
}
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});

AppRegistry.registerComponent('FidoTestProject', () => FidoTestProject);

关于ios - React-Native iOS - 如何通过按下按钮从 React-Native View 导航到非 React-Native View ( native iOS View Controller )?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45741903/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com