Question

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

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

我们有可能在应用程序中执行此操作吗？

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中实现它来进一步推动它，这样你就可以简单地显示/隐藏包含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

2 个答案: