React-Native如何在App内打开外链页面

前言：

在很多应用场景，比如说分享到微信好友，打开应用下载(更新)地址等，需要从App内部跳转到外部的链接。

方案一：

React-Native官方提供了一个**Linking**方法，用于和外部App链接进行交互。

static openURL(url: string)

尝试使用设备上已经安装的应用打开指定的url。
你还可以使用其他类型的URL，比如一个地理位置（形如”geo:37.484847,-122.148386”或是一个通讯录名片，只要是可以通过{@code Intent.ACTION_VIEW}打开的即可。
注：如果系统不知道如何处理给定的URL，则此方法会调用失败。如果你传入的URL不是一个http链接，则最好先通过{@code canOpenURL}方法检查一下。
注：对于web链接来说，协议头(“http://”, “https://”)不能省略！

我们直接使用该方法尝试打开一个页面

import React from 'react'
import { View,Text, TouchableWithoutFeedback, StyleSheet, Linking } from 'react-native'

export default class Example extends React.Component {
    open=()=>{
        let url = 'http://www.baidu.com';
        Linking.openURL(url) 
    }
    render() {
        return (
            <View style={styles.container}>
                 <TouchableWithoutFeedback onPress={this.open}>
                     <View style={styles.viewForText}>
                        <Text>点击我打开百度</Text>
                     </View>
                </TouchableWithoutFeedback>
            </View>

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#E5E5E5'
    },
    viewForText:{
        justifyContent:'center',
        alignItems:'center'
    }
})

下图是我在app里面打开的效果预览：

使用Linking方法打开的时候，注意状态栏左上角，会带上使用的App的名字，点击左上角，即可返回App内部。并且Linking方法打开外部页面的时候会使用手机系统的默认浏览器进行打开。而且打开的时候会有一个app缩小测滑的效果。

这种打开方式相当于从一个app跳转到了另外一个外部链接。如果我要实现页面在app内部打开呢？

打开后类似如下图的效果，注意左上角没有app名字：

我这里使用的是原生的打开方式：(ios 端部分代码)

import React from 'react'
import { View,Text, TouchableWithoutFeedback, StyleSheet, Linking } from 'react-native'
import { openPage } from '../libs/NativeBridge'

export default class Example extends React.Component {
    open=()=>{
        let url = 'http://www.baidu.com';
        Linking.openURL(url) 
    }
    render() {
        return (
            <View style={styles.container}>
                 <TouchableWithoutFeedback onPress={this.open}>
                     <View style={styles.viewForText}>
                        <Text>点击我打开百度</Text>
                     </View>
                </TouchableWithoutFeedback>
            </View>

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#E5E5E5'
    },
    viewForText:{
        justifyContent:'center',
        alignItems:'center'
    }
})

NativeBridge页面

import { NativeModules, NativeEventEmitter } from 'react-native'
//引入rn与原生端通信模块
const BTEventEmitter = NativeModules.BTEventEmitter

//注意 此方法名字需要与原生代码中的方法名字对应

export async function openPage(params) {
  return await BTEventEmitter.openPage(params)
}

ios代码 BTEventEmitter.m

#import "BTEventEmitter.h"
#import <React/RCTEventDispatcher.h>
#import <JSONModel/JSONModel.h>
#import "RNOpenPageModel.h"

#pragma mark -打开页面
RCT_EXPORT_METHOD(openPage:(NSDictionary *)dicParam resolveBlock:(RCTPromiseResolveBlock)resolveBlock rejectBlock:(RCTPromiseRejectBlock)rejectBlock){
  dispatch_sync(dispatch_get_main_queue(), ^{
    NSError *error;
    RNOpenPageModel *model = [[RNOpenPageModel alloc] initWithDictionary:dicParam error:&error];
    if (model) {
      SpeicalSchemeHandler handler = [BTRouter getSpeicalSchemeHandler];
      if (handler) {
        if (handler(model.url)) {
          return;
        }
      }
      if ([BTRouter canOpenURL:model.url] || [BTRouter isInnerSchemeUrl:model.url]) {
        [BTRouter openURL:model.url];
      }else{
        [[UIApplication sharedApplication] openURL:[NSURL URLWithString:model.url]];
      }
    }
  });
}

使用才方法可以在内部打开，并且翻页效果是ios自带的测滑翻页