iOS集成ReactNavite

RN-原生(iOS)相互跳转

2019-03-21  本文已影响17人  精神病患者link常

RN 跳转原生

  1. 原生添加导航
  2. 添加桥接文件,内部实现跳转方法
  3. RN 调用桥接文件内部的方法进行跳转
image.png
image.png

再跳转到RN


- (void)viewDidLoad {
    [super viewDidLoad];
  
  NSURL *jsCodeLocation;
  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"demo"
                                               initialProperties:@{
                                                                   @"launchOptions": @"Page3"
                                                                   }
                                                   launchOptions:nil];
  self.view = rootView;
  
  
}

通过RCTRootView initialProperties 参数判断,这时,程序会重新加载js文件
RN的入口文件会重新调用

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import Navigation from './src/router/router'
import Page2 from "./src/pages/page2";
import Page1 from "./src/pages/page1";
import Page3 from "./src/pages/page3";

import {createStackNavigator} from 'react-navigation';

export default class App extends Component<> {

    abc(currentPage){
        return createStackNavigator(
            {
                Page1: {
                    screen: Page1,
                    navigationOptions: {
                        headerTitle: "Page1",
                    }
                },
                Page2: {
                    screen: Page2,
                    navigationOptions: {
                        headerTitle: "Page2",
                    }
                },
                Page3: {
                    screen: Page3,
                    navigationOptions: {
                        headerTitle: "Page3",
                    }
                }
            },
                {
                    initialRouteName:  currentPage || 'Page1',
                    headerMode: 'screen',
                    gesturesEnabled: false,
                }
        )
    }

    aaaaa (WrappedComponent){
       return <WrappedComponent {...this.props}  />
    }

    render() {
        var  { launchOptions }  = this.props;

        console.log('launchOptions====',launchOptions)

        return this.aaaaa(this.abc(launchOptions));
    }
}

重新制定导航栈的 initialRouteName,相当于重置路由导航栈

上一篇 下一篇

猜你喜欢

热点阅读