在默认浏览器中打开 Url

我是新的反应-本地和我想打开 网址在 像安卓和 iPhone 中的 Chrome 这样的默认浏览器两者。

我们在 Android 中通过意图打开网址，就像我想要实现的功能一样。

我已经搜索了很多次，但它会给我的结果 深度链接。

190656 次浏览
小开
最佳答案

你应该使用 Linking。

来自文档的例子:

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>
);
}
}

下面是一个你可以在 世博小吃上试用的例子:

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',
},
});
小开

一个简单的方法，消除了检查应用程序是否可以打开网址。

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

用按钮呼叫它。

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

在 React 16.8 + 中，可以使用以下内容创建一个 ExternalLinkBtn组件，用于在浏览器中打开外部链接。

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>
)
}
小开

试试这个:

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


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

希望这能解决你的问题。


提交答案