android - Stack Navigator：从 React Native Screen 导航到 Native Screen，然后跳回 React Native Screen？

Question

要求是用户进入登录屏幕（基于 React Native 构建）-> PIN 屏幕（本机屏幕）-> 设备注册屏幕（基于 React Native 构建）

我能够从登录屏幕 -> PIN 屏幕，但无法从 PIN 屏幕转到设备注册屏幕。

毫无疑问，国家应该得到保护。即，如果我们从设备注册屏幕点击返回，我们应该登陆 PIN 屏幕，然后再次从 PIN 屏幕点击返回，我们应该登陆登录屏幕。

导航实现

const MainNavigator = createStackNavigator(
  {
    Login: {
      screen: Login,
      navigationOptions: {
        title: 'Login',
        header: null
      }
    },
    DeviceRegistration: {
      screen : DeviceRegistration,
      navigationOptions: {
        title: 'Device Registration',
        header: null
      }
    },
   {
    initialRouteName: 'Login'
   }
);

const Navigation = createAppContainer(MainNavigator);

LoginScreen 实现

import React, { Component } from 'react';
import { StyleSheet, View, Text, Button, NativeModules, AppRegistry } from 'react-native';
import { SafeAreaView } from 'react-navigation';

class LoginScreen extends Component {

    _goToNativePinPage(){
        NativeModules.ChangeViewBridge.changeToNativeView();
    }

    render() {
        const { navigate } = this.props.navigation;
        var s = require('../../styles/style');
        return (
            <SafeAreaView>
                <View style={s.container}>
                    <Text>This is Login page</Text>
                    <Button onPress={() => this._goToNativePinPage()} title="PIN PAGE"></Button>
                </View >
            </SafeAreaView>
        );
    }
}

AppRegistry.registerComponent('LoginScreen',() => LoginScreen);

export default Login;

从 React Native 到 Native 的桥接实现

#import <React/RCTBridgeModule.h>

@interface ChangeViewBridge : NSObject <RCTBridgeModule>
- (void) changeToNativeView;
@end

#import "ChangeViewBridge.h"
#import "AppDelegate.h"
#import <React/RCTBridgeModule.h>

@implementation ChangeViewBridge

RCT_EXPORT_MODULE(ChangeViewBridge);

RCT_EXPORT_METHOD(changeToNativeView) {

  AppDelegate *appDelegate = (AppDelegate *)[UIApplication sharedApplication].delegate;
  [appDelegate goToNativeView];
}

@end

内部应用程序委托

- (void) goToNativeView {
  dispatch_async(dispatch_get_main_queue(), ^{
      UIViewController *vc = [UIStoryboard storyboardWithName:@"main" bundle:nil].instantiateInitialViewController;
      self.window.rootViewController = vc;
  });
}

标签： androidiosreact-native