Запустите React Native внутри View Controller - PullRequest
0 голосов
/ 21 января 2019

Я создаю тестовое приложение в реагировать на нативную версию, где основной вид - React Native, а панель инструментов - Native Part (Android / iOS). Запустите реагировать на нативный и прикрепил фрагмент к основному приложению. Я использовал этот ответ. Но теперь мне нужно сделать то же самое для 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.

enter image description here

Так что теперь, когда я запускаю свое приложение, весь экран занят реакцией на родную, как отрегулировать размер, или мне нужно разместить дочерний контроллер представления, чтобы я мог видеть нативную метку.

1 Ответ

0 голосов
/ 22 января 2019

Предположим, у вас есть следующий компонент:

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

А теперь вы хотите загрузить его в обычный UIViewController из iOS.Вам просто нужно сделать следующее:

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

Вы можете увидеть больше на реагировать на родную страницу .

Редактировать 1:

Итак, какЯ вижу, что у вас все еще есть проблемы со смешиванием реагирующего и нативного кода iOS, я рассмотрю более полный пример, я очень надеюсь, что это поможет:)

Давайте создадим это приложение в три простых шага:

enter image description here

Это оранжевое представление было добавлено с помощью построителя интерфейса XCode, а синее - из компонента-реактивного компонента.Также обратите внимание на панель навигации, она является родной UINavigationController!

Шаг 1

Создайте контроллер представления со связанным файлом xib и добавьте метку.

Перейти кNew File и выберите Cocoa Touch Class: enter image description here

Затем в подклассе выберите UIViewController и отметьте Also create XIB file:

Примечание : Я придерживаюсь Objective-C, потому что легче иметь дело с реактивно-нативным, но вы можете сделать это и со Swift:)

enter image description here

Теперь вы должны получить пустой шаблон для контроллера представления с файлом XIB.

Шаг 2

Добавьте метку к вашему представлению в построителе интерфейса, это может быть что-то вроде следующего:

enter image description here

Затем измените ваш 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 /.

Сначала создайте RCTRootView и заполните его некоторым кодом js, например так:

Нетte : я только что использовал тот же компонент из предыдущего примера.

// 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

Вот и все.Запустите его, и результат должен выглядеть следующим образом:

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...