如何修改React Native Expo代码实现外部链接在Safari打开
Solution to Open External Links in Safari (Fix Apple Rejection)
Hey, here's your modified App.js that ensures external links open in Safari instead of your app's WebView, which should resolve Apple's concern about in-app external link handling:
import { StatusBar } from 'expo-status-bar'; import React, { useState, useRef } from 'react' import {ActivityIndicator, Platform, TouchableOpacity, Text, SafeAreaView, StyleSheet, View, Linking} from "react-native"; import { WebView } from 'react-native-webview'; import { NavigationContainer } from '@react-navigation/native'; import { Ionicons } from '@expo/vector-icons' import Constants from 'expo-constants' const App = () => { const [canGoBack, setCanGoBack] = useState(false) const [canGoForward, setCanGoForward] = useState(false) const [currentUrl, setCurrentUrl] = useState('') const webviewRef = useRef(null) backButtonHandler = () => { if (webviewRef.current) webviewRef.current.goBack() } frontButtonHandler = () => { if (webviewRef.current) webviewRef.current.goForward() } const handleExternalLink = (request) => { const baseDomain = 'https://www.google.co.in'; if (request.url !== currentUrl && !request.url.startsWith(baseDomain)) { Linking.openURL(request.url); return false; } return true; } return ( <> <StatusBar barStyle='dark-content' /> <View style={styles.flexContainer}> <WebView userAgent="Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.193 Mobile Safari/537.36" source={{ uri: 'https://www.google.co.in/search?q=restaurants+nearby&ct=ifl&cad=2:hungry&ei=IWHsX_aDGJK0swXew5HgBw&ved=0ahUKEwi2mN_oyfXtAhUS2qwKHd5hBHwQnRsIDg&rct=j' }} mixedContentMode = "compatibility" ref={webviewRef} onNavigationStateChange={navState => { setCanGoBack(navState.canGoBack) setCanGoForward(navState.canGoForward) setCurrentUrl(navState.url) }} onShouldStartLoadWithRequest={handleExternalLink} /> <View style={styles.tabBarContainer}> <TouchableOpacity onPress={backButtonHandler}> <Ionicons name="ios-arrow-back" size={32} color="white" /> </TouchableOpacity> <TouchableOpacity onPress={frontButtonHandler}> <Ionicons name="ios-arrow-forward" size={32} color="white" /> </TouchableOpacity> </View> </View> </> ) } const styles = StyleSheet.create({ flexContainer: { flex: 1, paddingTop:Constants.statusBarHeight }, tabBarContainer: { padding: 10, flexDirection: 'row', justifyContent: 'space-around', backgroundColor: '#000000' }, button: { color: 'white', fontSize: 20 } }) export default App
Key Changes Explained:
handleExternalLinkFunction: This checks if the requested URL is outside your app's base domain (https://www.google.co.inin your case). If it is, we useLinking.openURL()to launch the link in Safari, and returnfalseto prevent the WebView from loading it internally.onShouldStartLoadWithRequestProp: We attach our handler to this WebView prop, which intercepts all navigation requests. This is the critical part that lets us redirect external links to Safari.LinkingImport: Make sure you have this imported fromreact-native—it's required to open URLs in the system browser.
This approach aligns with Apple's guidelines by directing users to the default browser for external content, which should get your app past the rejection.
内容的提问来源于stack exchange,提问作者Zanam




