Предположим, у вас есть следующий компонент:
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, я рассмотрю более полный пример, я очень надеюсь, что это поможет:)
Давайте создадим это приложение в три простых шага:
Это оранжевое представление было добавлено с помощью построителя интерфейса XCode, а синее - из компонента-реактивного компонента.Также обратите внимание на панель навигации, она является родной UINavigationController
!
Шаг 1
Создайте контроллер представления со связанным файлом xib и добавьте метку.
Перейти кNew File
и выберите Cocoa Touch Class
:
Затем в подклассе выберите UIViewController
и отметьте Also create XIB file
:
Примечание : Я придерживаюсь Objective-C, потому что легче иметь дело с реактивно-нативным, но вы можете сделать это и со 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 /.
Сначала создайте 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
Вот и все.Запустите его, и результат должен выглядеть следующим образом: