如何在 React Native 中打开应用内浏览器窗口?

2023-12-22

当我单击 URL(适用于 iOS 和 Android)时,我尝试在不离开应用程序的情况下打开浏览器窗口。

行为应如下(以airbnb应用程序为例):

  • 点击“条款和条件”链接:链接示例 https://i.stack.imgur.com/4esEA.png
  • 在应用程序内打开浏览器:
  • 对于 iOS:iOS 应用内浏览器 https://i.stack.imgur.com/gCwSK.png
  • 安卓也一样。

我怎样才能做到这一点?我需要使用任何指定的现有库吗?

我正在使用react-native 0.37。


您可以使用新的React Native 的 InAppBrowser 插件 https://github.com/proyecto26/react-native-inappbrowser,检查下一个示例:

import { Linking } from 'react-native'
import InAppBrowser from 'react-native-inappbrowser-reborn';

...
  async openLink() {
    try {
      const isAvailable = await InAppBrowser.isAvailable()
      const url = 'https://www.google.com'
      if (isAvailable) {
        InAppBrowser.open(url, {
          // iOS Properties
          dismissButtonStyle: 'cancel',
          preferredBarTintColor: 'gray',
          preferredControlTintColor: 'white',
          // Android Properties
          showTitle: true,
          toolbarColor: '#6200EE',
          secondaryToolbarColor: 'black',
          enableUrlBarHiding: true,
          enableDefaultShare: true,
          forceCloseOnRedirection: true,
        }).then((result) => {
          Alert.alert(JSON.stringify(result))
        })
      } else Linking.openURL(url)
    } catch (error) {
      Alert.alert(error.message)
    }
  }
...

另一方面,您可以通过深度链接使用此插件,请查看项目的自述文件。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 React Native 中打开应用内浏览器窗口? 的相关文章

  • 为什么当我保存更改时,Expo 没有刷新?

    当我进行更改并保存它们时 模拟器中的应用程序不会刷新 我认为模拟器没有连接到 Metro 服务器 我尝试通过运行清除缓存expo r c 但这没有做任何事情 您是否尝试启用快速刷新 我遇到了同样的问题 但在启用 快速刷新 后 自动刷新再次开
  • 如何在react-navigation v5中使用withNavigation?

    我有一个嵌套组件 我想使用withNavigation在react navigation v5的嵌套组件中 为什么你不创建自己的带导航 import React from react import useNavigation from re
  • onPress 方法中箭头函数与普通函数的行为

    正在学习 Native React 并学习更多关于 javascript 的知识 所以我仍然不明白它的行为的很多事情 我使用 TouchableOpacity 及其 onPress 属性创建了一个按钮组件 为了让它工作 我必须发送我想要执行
  • 如何在 TypeScript 中使用 navigation.replace ?

    我试图在我的代码中使用它 const navigation useNavigation navigation replace AllFriends 但我不断收到错误消息 Property replace does not exist on
  • 视图有阴影集但无法有效计算阴影

    我收到此错误消息 gt View 54 of type RCTView has a shadow set but cannot calculate shadow efficiently 错误信息很清楚 只是不知道是哪个视图 54 有没有办法
  • Expo eas-cli iOS 构建失败

    我已经使用 React Native 创建了一个应用程序 并尝试通过 Expo 的 eas cli 创建一个 iOS 应用程序商店 跑步时eas build platform ios the Fastlane build failed wi
  • 无法在scrollView中滚动

    我有一个屏幕 我可以在输入字段中输入内容并获得相应的搜索结果 该列表在 ScrollView 中呈现 但当键盘打开时 在 Android 中 它仍然不允许我滚动 我怎样才能解决这个问题 return lt gt addressesFound
  • Expo 应用程序“您的应用程序正在使用广告标识符 (IDFA)”

    我正在尝试将应用程序上传到应用程序商店 每次我上传二进制文件时 苹果都会坚持认为我的应用程序正在使用广告 而我从未实现过这样的事情 我查看了文档并删除了涉及的所有代码ASIdentifier and adIdentifier我不太确定我错过
  • 如何在 React Native 中使用 Platform.OS 来处理元素?

    我想在 IOS 上只使用 KeyboardAwareScrollView 而不使用任何功能 并给出下面的 android 代码 我知道我需要使用 Platform OS ios 但我不明白如何实现它 请帮我 render return
  • 使用react-native使用WebView设置用户代理

    我想修改 WebView 中的用户代理字符串 以便在服务器端我可以检测到请求来自我的反应本机应用程序 我想使用 WebView 中的 source 属性来做到这一点 对于 IOS 和 Android 我该如何执行此操作 您只需将其设置为 W
  • Typescript:如何在 Redux 中输入 Dispatch

    例如我想删除dispatch any here export const fetchAllAssets gt dispatch any gt dispatch actionGetAllAssets return fetchAll getPr
  • React Native TextInput 在 Android 上打开时自动关闭

    我切换了笔记本电脑并克隆了我的项目的存储库 进行了快速的纱线安装 看起来它与主分支上的有很大的不同 但我没有打扰 因为也许这只是因为不同的节点版本 现在 每次我单击一个 TextInput 时 键盘都会立即打开和关闭 仅在 Android
  • 使用反应导航重置 TabNavigator 历史记录

    我有以下结构 const routeConfiguration Login screen Login Home screen TabBar const stackNavigatorConfiguration headerMode scree
  • 在 React Native 和 Expo 中加密敏感数据

    我正在使用 React Native 开发一个移动应用程序Expo https expo io 提供安全解决方案 项目所有者希望在应用程序中存储敏感的授权密钥 用于与 REST 服务器通信并访问安全数据 他要求这些密钥至少是加密的 并且尽可
  • 反应本机谷歌日历

    我疯狂地搜索 寻找一个可以与谷歌日历一起使用的 React Native 包 获取事件数据并单独显示 标题 描述等 有人知道 React Native 的包吗 Cheers 我最终使用了react native calendar 但为自己创
  • 从“react-native-vector-icons/Ionicons”导入图标

    我可以在同一屏幕上导入react native vector icons font awesome 和react native vector icons Ionicons 吗 基本上我想在同一屏幕上为不同的图标使用 font awesome
  • React-native 清单合并失败

    突然 当我在 Android 手机中编译我的项目时 我在合并清单时收到此错误 任务 app processDebugManifest 执行失败 清单合并失败 属性 application appComponentFactory value
  • 如何在android上使用离线包来反应本机项目?

    如何在 Android 上使用离线捆绑包 我没有看到关于在 android 上使用离线捆绑包的文档 我尝试取消注释 build gradle 中的代码 project ext react the name of the generated
  • 如何正确使用Hooks?

    我有一些问题 1 我定义了一个从API获取数据并调用它的函数useEffect 效果很好 但我在 VScode 中收到此警告 React Hook React useEffect 缺少依赖项 getOpenOrders 包含它或删除依赖项数
  • React Native 入门项目捆绑失败并出现意外令牌错误

    我正在尝试使用以下说明创建我的第一个适用于 Android 的 React Native 应用程序https facebook github io react native docs getting started html https f

随机推荐