Как я могу открыть внешнюю ссылку в новой вкладке в React Native?

Question 1

Я делаю:

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-адрес в новой вкладке?

reactjs react-native react-native-android react-native-ios react-native-web

6

Dimitri Kopriwa 14 Апр 2020 в 03:37

Answer

Я предполагаю, что есть два основных варианта:

Вы можете использовать только функцию 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');

16

Eduardo Ramos 5 Май 2020 в 17:53

Question 2

Я предполагаю, что есть два основных варианта:

Вы можете использовать только функцию 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');

16

Eduardo Ramos 5 Май 2020 в 17:53

Как я могу открыть внешнюю ссылку в новой вкладке в React Native?

1 ответ

Похожие вопросы

Новые вопросы

reactjs