移动应用经常需要打开外部链接。如果用户不必完全离开应用,就能查看链接内容,体验会更好。Expo为此提供expo-web-browser模块。本文介绍WebBrowser的用法,以及它与功能相近的WebView之间的区别。
expo-web-browser是Expo提供的库,可以通过
应用内浏览器
打开外部网页。简单来说,用户无需关闭应用,就能查看网页。
它基于
iOS的Safari View Controller
或
Android的Chrome Custom Tabs
,既保留系统浏览器快速、安全的UI,又让用户感觉仍在应用内。
首先安装expo-web-browser。
npx expo install expo-web-browser
安装完成后,可以这样使用。
import * as WebBrowser from 'expo-web-browser';
import { Button } from 'react-native';
export default function App() {
const openLink = async () => {
await WebBrowser.openBrowserAsync('https://example.com');
};
return <Button title="링크 열기" onPress={openLink} />;
}
示例中点击按钮后,会通过
应用内浏览器
打开
https://example.com。用户可以查看网页,完成后再回到应用。
WebBrowser
和
WebView
很容易混淆,但它们的功能和用途有些不同。
| 项目 | WebBrowser | WebView |
|---|
| UI | 系统浏览器UI(Safari或Chrome) | 应用内部的浏览器组件 |
|---|
| 安全性 | 较高,利用系统浏览器功能 | 应用自行渲染,需要安全配置 |
|---|
| 使用目的 | 打开外部链接 | 将Web应用集成到原生应用中 |
|---|
| 用户体验 | 像浏览器,有地址栏 | 完全集成于应用中,没有地址栏 |
|---|
| 复杂度 | 很简单 | 需要配置和维护 |
|---|
例如,打开登录链接或展示服务条款时,WebBrowser更合适。反过来,如果需要持续在应用中展示基于Web的UI,使用WebView更合适。
使用WebBrowser时,需要注意:
- **iOS模拟器中,Safari View Controller可能无法正常工作。**最好在真机上测试。
openBrowserAsync返回Promise,因此可以在浏览器关闭后处理相关事件。
例如,在浏览器关闭后执行指定操作。
const result = await WebBrowser.openBrowserAsync('https://example.com');
if (result.type === 'dismiss') {
console.log('브라우저가 닫혔습니다.');
}
Expo的WebBrowser可以方便地在应用中展示外部链接。它比WebView配置更简单,安全性也较高,因此只是打开链接时,适合使用WebBrowser。
- 可以通过WebBrowser打开登录页面,并实现认证完成后返回应用的流程。
- 使用
openAuthSessionAsync,也能实现专门针对OAuth登录的方式。