You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

如何修改React Native Expo代码实现外部链接在Safari打开

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:

  • handleExternalLink Function: This checks if the requested URL is outside your app's base domain (https://www.google.co.in in your case). If it is, we use Linking.openURL() to launch the link in Safari, and return false to prevent the WebView from loading it internally.
  • onShouldStartLoadWithRequest Prop: 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.
  • Linking Import: Make sure you have this imported from react-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

火山引擎 最新活动