模板版本：v0.4.0

react-native-inappbrowser-reborn

本项目基于 react-native-inappbrowser-reborn 开发。

该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-inappbrowser-reborn。 版本所属关系如下：

1. 安装与使用

进入到工程目录并输入以下命令：

npm

npm install @react-native-ohos/react-native-inappbrowser-reborn

yarn

yarn add @react-native-ohos/react-native-inappbrowser-reborn

下面的代码展示了这个库的基本使用场景：

import React, {useState } from 'react';
import {  StyleSheet, Text, Button ,ScrollView,View,StatusBarStyle,} from 'react-native';
import {InAppBrowser} from 'react-native-inappbrowser-reborn'
import {tryDeepLinking,openLink} from './utils'

export default function BrowserDemo() {
  const [text, setText] = useState('');
  const [url, setUrl] = useState('https://reactnative.dev');

  const onOpenLink = async() => {
    let resut = await openLink(url,{});
    setText(JSON.stringify(resut))
  }

  const onTryDeepLinking = async() => {
    let result = await tryDeepLinking();
    setText(JSON.stringify(result))
    return result;
  }

  const onIsAvailable = async () => {
    let isAvailable = await InAppBrowser.isAvailable();
    return isAvailable
  }

  const close =() => {
    openLink(url, {});
    setTimeout(function(){
      console.info('-----------------')
      InAppBrowser.close();
    },10000)
  }

  const closeAuth =() => {
    tryDeepLinking();
    setTimeout(function(){
      console.info('-----------------')
      InAppBrowser.closeAuth();
    },10000)
  }

  const warmup = () => {
    InAppBrowser.warmup();
  }

  const mayLaunchUrl = () => {
    InAppBrowser.mayLaunchUrl(url,[]);
  }
  
  return (
    <View style={styles.container}>
      <View style={styles.titleArea}>
        <Text style = {styles.title}>BrowserDemo</Text>
      </View>
      <View style = {styles.inputArea}>
        <Text style={styles.baseText}>
          {text}
        </Text>
      </View>
      <ScrollView style={styles.scrollView}>
        <View style={ { flexDirection: 'column'}}>
          <View style ={styles.baseArea}>
             <Text style= {{flex:1}}>onOpenLink</Text>
             <Button title='运行' color='#841584' onPress={onOpenLink}></Button>
          </View>

          <View style ={styles.baseArea}>
             <Text style= {{flex:1}}>onTryDeepLinking</Text>
             <Button title='运行' color='#841584' onPress={onTryDeepLinking}></Button>
          </View>

          <View style ={styles.baseArea}>
             <Text style= {{flex:1}}>onIsAvailable</Text>
             <Button title='运行' color='#841584' onPress={onIsAvailable}></Button>
          </View>

          <View style ={styles.baseArea}>
             <Text style= {{flex:1}}>close</Text>
             <Button title='运行' color='#841584' onPress={close}></Button>
          </View>

          <View style ={styles.baseArea}>
             <Text style= {{flex:1}}>tryDeepLinking</Text>
             <Button title='运行' color='#841584' onPress={tryDeepLinking}></Button>
          </View>

          <View style ={styles.baseArea}>
             <Text style= {{flex:1}}>closeAuth</Text>
             <Button title='运行' color='#841584' onPress={closeAuth}></Button>
          </View>

          <View style ={styles.baseArea}>
             <Text style= {{flex:1}}>warmup</Text>
             <Button title='运行' color='#841584' onPress={warmup}></Button>
          </View>

          <View style ={styles.baseArea}>
             <Text style= {{flex:1}}>mayLaunchUrl</Text>
             <Button title='运行' color='#841584' onPress={mayLaunchUrl}></Button>
          </View>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    flexDirection: 'column',
    alignItems: 'center',
    backgroundColor: '#F1F3F5',
  }, 
  baseText: {
    fontWeight: 'bold',
    textAlign:'center',
    fontSize:16
  },

  titleArea:{
    width:'90%',
    height:'8%',
    alignItems:'center',
    flexDirection:'row',
  },

  title: {
    width:'90%',
    color:'#000000',
    textAlign:'left',
    fontSize: 30,
  },

  scrollView: {
    width:'90%',
    marginHorizontal: 20,
  },

  inputArea: {
    width:'90%',
    height:'10%',
    borderWidth:2,
    borderColor:'#000000',
    marginTop:8,
    justifyContent:'center',
    alignItems:'center',
  },
  baseArea: {
    width:'100%',
    height:60,
    borderRadius:4,
    borderColor:'#000000',
    marginTop:8,
    backgroundColor:'#FFFFFF',
    flexDirection: 'row',
    alignItems:'center',
    paddingLeft:8,
    paddingRight:8
  }

});

新建utils.ts文件：

import {Alert,Platform,} from 'react-native';
import {InAppBrowser} from 'react-native-inappbrowser-reborn'

export interface options {
  dismissButtonStyle?: 'done' | 'close' | 'cancel',
  preferredBarTintColor?:string,
  preferredControlTintColor?:string
}

export const openLink = async (
url: string,
statusBarStyle: options,
animated = true,
) => {
    let result  = await InAppBrowser.open(
        url,
        {
          dismissButtonStyle:statusBarStyle.dismissButtonStyle,
          preferredBarTintColor:statusBarStyle.preferredBarTintColor,
          preferredControlTintColor:statusBarStyle.preferredControlTintColor
        }
    );
    Alert.alert('Response', JSON.stringify(result));
    return result;
}

export const getDeepLink = (path = '') => {
    const scheme = 'my-demo';
    const prefix =
      Platform.OS === 'android' ? `${scheme}://demo/` : `${scheme}://`;
    return prefix + path;
};

export const tryDeepLinking = async () => {
    const loginUrl = 'https://proyecto26.github.io/react-native-inappbrowser/';
    const redirectUrl = getDeepLink();
    const url = `${loginUrl}?redirect_url=${encodeURIComponent(redirectUrl)}`;
    try {
      if (await InAppBrowser.isAvailable()) {
        const result = await InAppBrowser.openAuth(url, redirectUrl, {
          // iOS Properties
          ephemeralWebSession: false,
        });
        //await sleep(800);
        return result
      } else {
        return 'InAppBrowser is not supported :/'
      }
    } catch (error) {
      console.error(error);
    }
    return 'Something’s wrong with the app'
};

2. Link

使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md

如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。

{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-ohos/react-native-inappbrowser-reborn": "file:../../node_modules/@react-native-ohos/react-native-inappbrowser-reborn/harmony/inappbrowser.har"
  }

cd entry
ohpm install

+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")

# RNOH_BEGIN: manual_package_linking_1
+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-inappbrowser-reborn/src/main/cpp" ./inappbrowser-reborn)
# RNOH_END: manual_package_linking_1

# RNOH_BEGIN: manual_package_linking_2
+ target_link_libraries(rnoh_app PUBLIC rnoh_inappbrowser_reborn)
# RNOH_END: manual_package_linking_2

#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
+ #include "InappbrowserRebornPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
        std::make_shared<RNOHGeneratedPackage>(ctx),
+       std::make_shared<InappbrowserRebornPackage>(ctx)
    };
}

  ...
+ import { RNInAppBrowserPackage } from '@react-native-ohos/react-native-inappbrowser-reborn/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
+   new RNInAppBrowserPackage(ctx),
  ];
}

2.5. 必要的配置项

2.5.1. 配置Entry(该模块始终需要手动配置)

1.在 entry/src/main/ets/entryability 下创建 BrowserManagerAbility.ets

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

export default class BrowserManagerAbility extends UIAbility {

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/BrowserManagerPage', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

2.在 entry/src/main/module.json5注册BrowserManagerAbility

"abilities":[{
    "name": "BrowserManagerAbility",
    "srcEntry": "./ets/entryability/BrowserManagerAbility.ets",
    "description": "$string:EntryAbility_desc",
    "icon": "$media:icon",
    "startWindowIcon": "$media:startIcon",
    "startWindowBackground": "$color:start_window_background",
    "visible": true,
  }
...
]

3.在 entry/src/main/ets/pages 下创建 BrowserManagerPage.ets

import { BrowserPage } from '@react-native-ohos/react-native-inappbrowser-reborn/Index'

@Entry
@Component
struct ChromeTabsManagerPage {
  build() {
    Row(){
      Column(){
        BrowserPage();
      }
      .width('100%')
    }
    .height('100%')
  }

}

4.在 entry/src/main/resources/base/profile/main_pages.json 添加配置

{
 "src": [
  "pages/Index",
  "pages/BrowserManagerPage"
 ]
}

5.如果需要预热应用内浏览器客户端，使其启动速度显著加快，可以将以下内容添加到BrowserManagerAbility

import { RNInAppBrowserModule } from '@react-native-ohos/react-native-inappbrowser-reborn/ts';

export default class BrowserManagerAbility extends UIAbility {

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
    RNInAppBrowserModule.start();
  }
}

2.6. 运行

点击右上角的 sync 按钮

或者在命令行终端执行：

cd entry
ohpm install

然后编译、运行即可。

3. 约束与限制

3.1. 兼容性

本文档内容基于以下版本验证通过：

1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71;
3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
4. RNOH: 0.82.1; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;

4. 属性

iOS Options

Android Options

5. API

6. 遗留问题

• 打开浏览器时，不能指定浏览器设置阅读模式: issue#1
• 打开浏览器，无法使文稿动起来: issue#2
• 无法设置浏览器的视图控制器的风格: issue#3
• 无法设置浏览器的过度风格: issue#4
• 无法设置浏览器的推送方式: issue#5
• 浏览器无法设置工具栏进行折叠: issue#6
• 浏览器设置是否重复使用前一次会话的cookie: issue#7
• 浏览器设置模态框的自定义尺寸: issue#8

7. 其他

8. 开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。