Question

我正在用react native构建一个测试应用程序，其中主视图是React Native，工具栏是Native Part（Android / iOS）。就像这张图片一样，因此在Android中，我使用Fragment来运行react native和将该片段附加到主应用程序上。我使用了this答案。但是现在我需要为iOS做同样的事情，任何有用的链接或博客都会有所帮助。

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

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

其中TwtViewController继承自UiViewController并连接有滑板。

所以现在当我运行我的应用程序时，整个屏幕都被react native占用了，如何调整尺寸或我是否需要放置子视图控制器以便可以看到native标签。

Answer 1

假设您具有以下组件：

import React from 'react';
import { AppRegistry, View, Text } from 'react-native';

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

class SimpleTextComponent extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>{this.props.text}</Text>
      </View>
    );
  }
}

// module name
AppRegistry.registerComponent('SimpleTextComponent', () => SimpleTextComponent);

现在您要从iOS将其加载到普通的UIViewController中。您只需要执行以下操作：

// Run this before presenting the view controller inside your native iOS app.

// In this case, index.bundle matches the index.js file that contains your component code
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];

// Provide the same module name used on AppRegistry
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                    moduleName:@"SimpleTextComponent"
                                             initialProperties:@{@"text": "React Native Content"}
                                                 launchOptions:nil];

UIViewController *viewController = [UIViewController new];
viewController.view = rootView;
[self presentViewController:viewController animated:YES completion:nil];

您可以在react native page上看到更多信息。

编辑1：

因此，正如我所见，您仍然无法将react-native和本机iOS代码混合在一起，我将通过一个更完整的示例，我真的希望这会有所帮助：）

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

此橙色视图是Xcode的界面生成器添加的，蓝色视图来自react-native组件。另外，请注意导航栏，它是本机UINavigationController！

步骤1

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

转到New File并选择Cocoa Touch Class：

然后，在子类上选择UIViewController并标记Also create XIB file：

注意：我坚持使用Objective-C，因为它更易于处理react-native，但您也可以使用Swift来做到这一点：）

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

步骤2

在界面生成器上的视图中添加标签，如下所示：

然后，修改AppDelegate.m并将新的视图控制器嵌入UINavigationController内，并将其设置为根视图控制器：

#import "AppDelegate.h"
#import "NativeLabelViewController.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NativeLabelViewController *rootViewController = [[NativeLabelViewController alloc] initWithNibName:@"NativeLabelViewController"
                                                                                              bundle:[NSBundle mainBundle]];
  UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController: rootViewController];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  self.window.rootViewController = navigationController;
  [self.window makeKeyAndVisible];

  return YES;
}

@end

步骤3

现在让我们在视图\ o /中嵌入一个react组件。

首先，创建一个RCTRootView并用一些js代码填充它，如下所示：

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

// index here matches the index.js file on your project's root.
NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
UIView *reactView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                moduleName:@"SimpleTextComponent"
                                         initialProperties:@{@"text": @"I came from React Native \\o/"}
                                             launchOptions:nil];

现在，为其添加一些约束。我选择匹配超级视图的底部，前导和尾随，并匹配垂直中心作为顶部约束：

// Setup react view constraints
[self.view addSubview:reactView];
[reactView setTranslatesAutoresizingMaskIntoConstraints:NO];

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];

最终文件应如下所示：

#import "NativeLabelViewController.h"
#import <React/RCTRootView.h>
#import <React/RCTBundleURLProvider.h>

@interface NativeLabelViewController ()

@end

@implementation NativeLabelViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  self.title = @"Mixed react-native and iOS views";
  [self setupReactView];
}

- (void)setupReactView {
  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  UIView *reactView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"SimpleTextComponent"
                                           initialProperties:@{@"text": @"I came from React Native \\o/"}
                                               launchOptions:nil];

  // Setup react view constraints
  [self.view addSubview:reactView];
  [reactView setTranslatesAutoresizingMaskIntoConstraints:NO];

  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];
}

@end

就是这样。运行它，结果应如下所示：

在View Controller中运行React Native

1 个答案:

编辑1：

步骤1

步骤2

步骤3