Android 在默认web浏览器中打开Url
我是react native的新手,我想在默认浏览器中打开url,就像Android和iPhone中的Chrome一样 我们在Android中通过intent打开url,这和我想要实现的功能一样 我已经搜索了很多次,但它会给我Deepklinking的结果。你应该使用 文档中的示例:Android 在默认web浏览器中打开Url,android,ios,react-native,Android,Ios,React Native,我是react native的新手,我想在默认浏览器中打开url,就像Android和iPhone中的Chrome一样 我们在Android中通过intent打开url,这和我想要实现的功能一样 我已经搜索了很多次,但它会给我Deepklinking的结果。你应该使用 文档中的示例: class OpenURLButton extends React.Component { static propTypes = { url: React.PropTypes.string }; handl
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>
);
}
}
类OpenURLButton扩展React.Component{
静态propTypes={url:React.propTypes.string};
handleClick=()=>{
Linking.canOpenURL(this.props.url).then(supported=>{
如果(支持){
Linking.openURL(this.props.url);
}否则{
log(“不知道如何打开URI:+this.props.url”);
}
});
};
render(){
返回(
{" "}
{'}打开{this.props.url}{'}
{" "}
);
}
}
下面是一个您可以尝试的示例:
import React,{Component}来自'React';
从“react native”导入{视图、样式表、按钮、链接};
从“expo”导入{Constants};
导出默认类应用程序扩展组件{
render(){
返回(
{Linking.openURL('https://google.com')}} />
);
}
}
const styles=StyleSheet.create({
容器:{
弹性:1,
对齐项目:“居中”,
为内容辩护:“中心”,
paddingTop:Constants.statusBarHeight,
背景颜色:“#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} />
在React 16.8+中,使用功能组件
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')
})}}
/>
}
export default function exampleUse() {
return (
<View>
<ExternalLinkBtn title="Example Link" url="https://example.com" />
</View>
)
}
从“React”导入React;
从“react native”导入{按钮,链接};
const ExternalLinkBtn=(道具)=>{
返回{
Linking.openURL(props.url)
.catch(错误=>{
console.error(“打开页面失败,因为:”,错误)
警报('打开页面失败')
})}}
/>
}
导出默认函数exampleUse(){
返回(
)
}
试试这个:
import React,{useCallback}来自“React”;
从“react native”导入{Linking};
OpenWEB=()=>{
Linking.openURL(url);
};
常量应用=()=>{
返回OpenWeb}>打开您的WEB;
};
希望这能解决您的问题。@RajKumarN,如果您有一个抓取新闻文章的应用程序,并且您想在单独的浏览器中打开新闻文章的超链接,那么这将如何工作?请查看。这可能会有帮助@Daniel@RajKumarN我们如何打开应用程序内部的外部URL而不重定向到浏览器?如何处理空值?假设我正在从后端接收URL,但它返回的不是字符串而是null,应用程序正在崩溃。@ASN在将URL传递给
openURL
方法之前,请先进行检查。例如:If(this.state.url)Linking.openURL(this.state.url)
。如果你不想事先检查,你也可以使用catch子句。是的,我就是这样处理的。谢谢:)嗨!只是一个问题,如果选择默认打开应用程序,并且我需要在浏览器中打开相同的链接,那么您建议android怎么做?简单、简短、有用的解决方案,您能对它发表评论吗?当我从浏览器手动返回到应用程序时,会显示空白屏幕。
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')
})}}
/>
}
export default function exampleUse() {
return (
<View>
<ExternalLinkBtn title="Example Link" url="https://example.com" />
</View>
)
}