如何在 React Native 中添加应用内浏览

Question

我正在创建一个应用程序，其中 JSON 响应包含用户的 URL。如果他们点击它，浏览器应该显示内容。

我使用了链接，但它会将我重定向到外部浏览器。

有什么方法可以在应用程序中完成吗？

Answer 1

你可以直接实现这个组件：https://facebook.github.io/react-native/docs/webview.html

import React, { Component } from 'react';
import { WebView } from 'react-native';

class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://github.com/facebook/react-native'}}
        style={{marginTop: 20}}
      />
    );
  }
}

您可以通过在 Modal 中实现它来进一步推动它，这样您就可以简单地 show/hide 包含 WebView 的模态

Answer 2

您可以为 React Native 实现 InAppBrowser 插件：

import React, { Component } from 'react';
import InAppBrowser from 'react-native-inappbrowser-reborn'

class App extends Component {
  async openLink() {
    const result = await InAppBrowser.open('https://www.google.com', {
      // iOS Properties
      dismissButtonStyle: 'cancel',
      preferredBarTintColor: 'gray',
      preferredControlTintColor: 'white',
      readerMode: false,
      // Android Properties
      showTitle: true,
      toolbarColor: '#6200EE',
      secondaryToolbarColor: 'black',
      enableUrlBarHiding: true,
      enableDefaultShare: true,
      forceCloseOnRedirection: false,
      // Specify full animation resource identifier(package:anim/name)
      // or only resource name(in case of animation bundled with app).
      animations: {
        startEnter: 'slide_in_right',
        startExit: 'slide_out_left',
        endEnter: 'slide_in_right',
        endExit: 'slide_out_left',
      },
      headers: {
        'my-custom-header': 'my custom header value'
      },
    });
  }
}
export default App

如何在 React Native 中添加应用内浏览

How to add in-app browsing in React Native

react-native

react-native-android

react-native-ios