Ios 运行反应本机内部视图控制器

我正在react-native中构建一个测试应用程序，其中主视图为react-native，工具栏为native部分（Android/iOS）。如下图所示，在Android中，我使用Fragment运行react-native并将该片段附加到主应用程序。我使用了answer。但现在我需要为iOS做同样的事情，任何有用的链接或博客都会有所帮助

[编辑]：在@Murilo Paixão建议之后，我将AppDelegate更改为以下内容：-

let rootView = RCTRootView(bundleURL: jsCodeLocation, moduleName: "swiftdemoapp", initialProperties: nil, launchOptions: launchOptions)
let rootViewController = TwtViewController()
rootViewController.view = rootView

其中TwtViewController继承自UiViewController，并有一个stroyboard连接到它

---

因此，现在当我运行我的应用程序时，整个屏幕都被react native占据。如何调整大小，或者我是否需要放置子视图控制器，以便我可以看到本机标签。

假设您有以下组件：

从“React”导入React；
从“react native”导入{AppRegistry，View，Text}；
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#FFFFFF”，
},
});
类SimpleTextComponent扩展了React.Component{
render（）{
返回(
{this.props.text}
);
}
}
//模块名
注册表组件（'SimpleTextComponent'，（）=>SimpleTextComponent）；

现在，您希望将其加载到iOS中的普通

UIViewController

中。您只需执行以下操作：

//在本机iOS应用程序中显示视图控制器之前，请运行此操作。
//在本例中，index.bundle与包含组件代码的index.js文件匹配
NSURL*jsCodeLocation=[NSURL URLWithString:@”http://localhost:8081/index.bundle?platform=ios"];
//提供AppRegistry上使用的相同模块名称
RCTRootView*rootView=[[RCTRootView alloc]initWithBundleURL:jsCodeLocation
moduleName:@“SimpleTextComponent”
initialProperties:@{@“文本”：“反应本机内容”}
启动选项：无]；
UIViewController*viewController=[UIViewController新建]；
viewController.view=rootView；
[self-presentViewController:viewController动画：是完成：无]；

你可以在上面看到更多

编辑1： 因此，我看到您在混合react本机和本机iOS代码时仍然存在问题，我将介绍一个更完整的示例，我真的希望这能有所帮助：）

让我们通过三个简单步骤构建此应用程序：

这个橙色视图是用Xcode的interface builder添加的，蓝色视图来自react本机组件。另外，请注意导航栏，它是本机的

UINavigationController

第一步 使用关联的xib文件创建视图控制器并添加标签

转到

新建文件

并选择

可可触控类

：

然后，在子类上选择

UIViewController

并标记

也创建XIB文件

：

注意：我坚持使用Objective-C，因为它更容易处理react-native，但您也可以使用Swift：）

现在，您应该为带有XIB文件的视图控制器获取一个空模板

步骤2 将标签添加到interface builder的视图中，可以是以下内容：

然后，修改

AppDelegate.m

并将新视图控制器嵌入

UINavigationController

中，并将其设置为根视图控制器：

#导入“AppDelegate.h”
#导入“NativeLabelViewController.h”
@实现AppDelegate
-（BOOL）应用程序：（UIApplication*）应用程序使用选项完成启动：（NSDictionary*）启动选项
{
NativeLabelViewController*rootViewController=[[NativeLabelViewController alloc]initWithNibName:@“NativeLabelViewController”
bundle:[NSBundle mainBundle]]；
UINavigationController*导航控制器=[[UINavigationController alloc]initWithRootViewController:rootViewController]；
self.window=[[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds]；
self.window.rootViewController=navigationController；
[self.window makeKeyAndVisible]；
返回YES；
}
@结束

步骤3 现在，让我们在视图\o/中嵌入一个react组件

首先，创建一个

RCTRootView

，并用一些js代码填充它，如下所示：

注意：我刚刚使用了上一个示例中的相同组件

//此处的索引与项目根目录上的index.js文件匹配。
NSURL*jsCodeLocation=[[RCTBundleURLProvider sharedSettings]jsBundleURLForBundleRoot:@“索引”后备资源：无]；
UIView*reactView=[[RCTrotView alloc]initWithBundleURL:jsCodeLocation
moduleName:@“SimpleTextComponent”
initialProperties:@{@“text”：@“我来自React Native\\o/”}
启动选项：无]；

现在，为它添加一些约束。我选择匹配superview的底部、前导和尾随，并匹配顶部约束的垂直中心：

//设置反应视图约束
[self.view addSubview:reactView]；
[反应视图设置翻译自动调整大小GMaskintoConstraints:否]；
NSLayoutConstraint*leadingConstraint=[reactView.leadingAnchor constraintEqualToAnchor:[self.view leadingAnchor]]；
NSLayoutConstraint*bottomConstraint=[reactView.bottomAnchor constraintEqualToAnchor:[self.view bottomAnchor]]；
NSLayoutConstraint*trailingConstraint=[reactView.trailingAnchor constraintEqualToAnchor:[self.view trailingAnchor]]；
NSLayoutConstraint*topConstraint=[reactView.topAnchor constraintEqualToAnchor:[self.view centerYAnchor]]；
[self.view addConstraints:@[leadingConstraint，bottomConstraint，trailingConstraint，topConstraint]；
[self.view setNeedsUpdateConstraints]；

最终文件应如下所示：

#导入“NativeLabelViewController.h”
#进口
#进口