如何在react-native中打开网址跳转到对应网址而不是在原页面？

最新推荐文章于 2023-09-22 15:34:23 发布

原创

最新推荐文章于 2023-09-22 15:34:23 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在React Native的sectionScreen.js组件中打开http://www.baidu.com，而不是在原页面基础上打开。通过引入`react-native-webview`，创建WebView组件加载网页，并利用Linking的openURL()方法处理链接。当遇到返回时依然在原网页打开的问题，通过onShouldStartLoadWithRequest方法拦截URL加载，返回false阻止默认行为，从而解决了问题。

需求：在sectionScreen.js页面中打开http://www.baidu.com而不是在原页面的基础上打开

1.npm i react-native-webview --save

2.WebView 创建一个原生的 WebView，可以用于访问一个网页,还可以直接嵌入 html 代码

详情：https://reactnative.cn/docs/next/webview

 <WebView
     source={
  
  {html:htmlContent+htmlStyles}}
     scalesPageToFit={false}
     scrollEnabled={false}
     onNavigationStateChange={ event =>{
           console.log(event)
                          
     if(event.url!='about:blank'){
      //Linking作用就是没有在页面中打开网址，直接去浏览器中打开
       Linking.openURL(event.url)
                 } 
           }}
      />

当导航状态发生变化时开始监听事件，可以看到event对象的内容