My test is simple.
In didFinishLaunchingWithOptions, I create a UINavigationController and a UIViewController which contains RCTRootView. Then push the UIViewController to UINavigationController' s stack.
#import "AppDelegate.h"
#import "RCTRootView.h"
UINavigationController* theNavi = nil;
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"TouchableFeedbackEvents"
launchOptions:launchOptions];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [[UIViewController alloc] init];
rootViewController.view = rootView;
UINavigationController* nav = theNavi = [[UINavigationController alloc] init];
[nav pushViewController:rootViewController animated:YES];
self.window.rootViewController = nav;
[self.window makeKeyAndVisible];
return YES;
}
@end
And I write a bridger which can load another RCTRootView, and push the new UIViewController to navigation controller.
#import "ReactNativeBridger.h"
#import "RCTRootView.h"
extern UINavigationController* theNavi;
@implementation ReactNativeBridger
- (void)startReactApp:(NSString*)componentName title:(NSString*)title
{
RCT_EXPORT();
NSURL *jsCodeLocation;
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:componentName
launchOptions:@{}];
UIViewController* vc = [[UIViewController alloc] init];
vc.view = rootView;
vc.title = title;
dispatch_async(dispatch_get_main_queue(), ^{
[theNavi pushViewController:vc animated:YES];
});
}
@end
The js just do one thing. On press, the script will invoke startReactApp method and push a new RCTRootView.
'use strict';
var React = require('react-native');
var {
StyleSheet,
AppRegistry,
Text,
TouchableOpacity,
View,
} = React;
var ReactNativeBridger = require('NativeModules').ReactNativeBridger;
var TouchableFeedbackEvents = React.createClass({
getInitialState: function() {return {};},
render: function() {
return (
<View style={{top: 100}}>
<TouchableOpacity
style={styles.wrapper}
onPress={() => this._press('press')}>
<Text style={styles.button}>Press Me</Text>
</TouchableOpacity>
</View>
);
},
_press: function(eventName) {
ReactNativeBridger.startReactApp('TouchableFeedbackEvents', 'AAAA');}
});
var styles = StyleSheet.create({
row: {
justifyContent: 'center',
flexDirection: 'row',
},
button: {
color: '#007AFF',
},
wrapper: {
borderRadius: 8,
},
});
AppRegistry.registerComponent('TouchableFeedbackEvents', () => TouchableFeedbackEvents);
The first view works perfectly. Press the button, another view will be pushed. But when I click the same button on the second view, nothing happens. It cannot respond to my pressing event.