기본 웹 브라우저에서 URL 열기

기본 웹 브라우저에서 URL 열기

저는 리액트 네이티브가 처음이고 안드로이드와 아이폰 모두 크롬과 같은 기본 브라우저에서 URL을 열고 싶습니다.

우리는 내가 성취하고자 하는 기능과 같은 기능을 안드로이드에서 의도를 통해 url을 엽니다.

나는 여러 번 검색을 해봤지만, 그것은 나에게 Deepklinking의 결과를 줄 것입니다.

를 사용해야 합니다.

문서의 예:

class OpenURLButton extends React.Component {
  static propTypes = { url: React.PropTypes.string };
  handleClick = () => {
    Linking.canOpenURL(this.props.url).then(supported => {
      if (supported) {
        Linking.openURL(this.props.url);
      } else {
        console.log("Don't know how to open URI: " + this.props.url);
      }
    });
  };
  render() {
    return (
      <TouchableOpacity onPress={this.handleClick}>
        {" "}
        <View style={styles.button}>
          {" "}<Text style={styles.text}>Open {this.props.url}</Text>{" "}
        </View>
        {" "}
      </TouchableOpacity>
    );
  }
}

Expo 스낵을 사용해 볼 수 있는 예는 다음과 같습니다.

import React, { Component } from 'react';
import { View, StyleSheet, Button, Linking } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
       <Button title="Click me" onPress={ ()=>{ Linking.openURL('https://google.com')}} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

앱이 URL을 열 수 있는지 확인하지 않아도 되는 더 간단한 방법입니다.

  loadInBrowser = () => {
    Linking.openURL(this.state.url).catch(err => console.error("Couldn't load page", err));
  };

버튼으로 부르기.

<Button title="Open in Browser" onPress={this.loadInBrowser} />

사용해 보십시오.

import React, { useCallback } from "react";
import { Linking } from "react-native";
OpenWEB = () => {
  Linking.openURL(url);
};

const App = () => {
  return <View onPress={() => OpenWeb}>OPEN YOUR WEB</View>;
};

이것이 당신의 문제를 해결하기를 바랍니다.

React 16.8+에서는 다음을 사용하여 다음을 생성할 수 있습니다.ExternalLinkBtn구성 요소, 유사a웹 태그링크가 기본 브라우저에서 외부로 열립니다.

import React from 'react';
import { Button, Linking } from 'react-native';

const ExternalLinkBtn = (props) => {
  return <Button
            title={props.title}
            onPress={() => {
                Linking.openURL(props.url)
                .catch(err => {
                    console.error("Failed opening page because: ", err)
                    alert('Failed to open page')
                })}}
          />
}

아래는 우리의 사용 예입니다.ExternalLinkBtn구성 요소에.

export default function exampleUse() {
  return (
    <View>
      <ExternalLinkBtn title="Example Link" url="https://example.com" />
    </View>
  )
}

언급URL : https://stackoverflow.com/questions/43804032/open-url-in-default-web-browser