reactjs - 如何在 React Native 的新标签页中打开外部链接？

Question

我在做:

import React from 'react';
import PropTypes from 'prop-types';
import { TouchableOpacity, Linking } from 'react-native';

/**
 * Used to create external link to other websites
 */
class ExternalLink extends React.Component {
  _openLink = async () => {
    const { href } = this.props;
    if (await Linking.canOpenURL(href)) {
      await Linking.openURL(href);
    }
  };

  render() {
    const { href, children, ...rest } = this.props;
    return (
      <TouchableOpacity
        accessibilityRole="link"
        onPress={this._openLink} // eslint-disable-line no-underscore-dangle
        href={href}
        {...rest}
      >
        {children}
      </TouchableOpacity>
    );
  }
}

ExternalLink.propTypes = {
  /** External URL */
  href: PropTypes.string.isRequired,
  /** Any node */
  children: PropTypes.node.isRequired,
};

export default ExternalLink;

但是，这在当前选项卡中打开，有没有办法在新选项卡中打开 URL？

Answer 1

我想有两个主要选择:

你只能在 web 中使用 window.open() 函数:

if(Platform.OS == 'web'){
   window.open(url, '_blank');
} else {
   Linking... // normal Linking react-native
}

或者您可以从 react-native-web ( https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/Linking/index.js ) 创建自定义链接:

CustomLinking.js :

import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
import invariant from 'fbjs/lib/invariant';

const initialURL = canUseDOM ? window.location.href : '';

const CustomLinking = {
  addEventListener() {},
  removeEventListener() {},
  canOpenURL(): Promise<boolean> {
    return Promise.resolve(true);
  },
  getInitialURL(): Promise<string> {
    return Promise.resolve(initialURL);
  },
  openURL(url: string, target = '_self'): Promise<Object | void> {
    try {
      open(url, target);
      return Promise.resolve();
    } catch (e) {
      return Promise.reject(e);
    }
  },
  _validateURL(url: string) {
    invariant(typeof url === 'string', 'Invalid URL: should be a string. Was: ' + url);
    invariant(url, 'Invalid URL: cannot be empty');
  }
};

const open = (url, target) => {
  if (canUseDOM) {
    window.open(
      url,
      target // <- This is what makes it open in a new window.
    );
  }
};

export default CustomLinking;

用法:

import Linking from "./CustomLinking";

Linking.openURL(href, '_blank');