我们可以在 React Native Webview 中打开 Chrome 自定义选项卡/Safari 视图控制器吗?

Can we open a Chrome Custom Tab/ Safari View controller inside a React Native Webview?

提问人:DeepBlueSeaArrow 提问时间:11/16/2023 更新时间:11/16/2023 访问量:12

问:

我正在尝试在底板内的 react native webivew 中加载 CCT/SVC,这甚至可能吗?通常,CCT/SVC 作为整页加载到应用程序顶部,但我们可以只在 Web 视图中加载吗?

我正在尝试做类似的事情,但是当我运行此代码时,我得到了。null is not an object (evaluating 'RNInAppBrowser.open')

import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';
import { InAppBrowser } from 'react-native-inappbrowser-reborn';

const MyWebView = () => {
  const webViewRef = useRef(null);

  const openInAppBrowser = async (url) => {
    try {
      await InAppBrowser.open(url, {
        // options
        // For example:
        // toolbarColor: '#6200EA',
        // secondaryToolbarColor: 'black',
        // showTitle: false,
        // enableUrlBarHiding: true,
        // enableDefaultShare: true,
        // forceCloseOnRedirection: true,
      });
    } catch (error) {
      console.error(error.message);
    }
  };

  const handleNavigationStateChange = (newState) => {
    // Handle any necessary state changes here.
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: 'https://example.com' }}
      onNavigationStateChange={handleNavigationStateChange}
      // Add any other WebView props as needed
      onShouldStartLoadWithRequest={(event) => {
        // Intercept WebView URL loading and open in custom tab
        openInAppBrowser(event.url);
        return false; // Prevent WebView from loading the URL
      }}
    />
  );
};

export default MyWebView;

谢谢!

javascript 反应原生

评论


答: 暂无答案