在 React Native 中使用其他域重定向 WebView

Question

我正在尝试将链接从另一个域重定向到设备的默认浏览器。

例如：

• 如果链接是http://domain.io，则留在WebView中；
• 如果链接是 http://domain.io/page，我们留在WebView；
• 如果链接是 http://mylink.io/，我们将用户重定向到默认浏览器 设备，然后我们离开 WebView。

我尝试了很多东西，但我仍然无法使其工作。我考虑将onNavigationStateChange 与链接一起使用。

感谢您的帮助。

import React from 'react';
import { StyleSheet, View, WebView } from 'react-native';
import { Constants } from 'expo';


export default class App extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.statusBar} />
        <WebView
          source={{uri: 'https://example.com'}}
          renderError={() => alert('Merci de vérifier votre connexion Internet', 'Internet non disponible')}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  statusBar: {
    backgroundColor: "#1D3B57",
    height: Constants.statusBarHeight,
  }
});

Answer 1

解决方案 1：

onNavigationStateChange(e)
{
  if(e.url !== this.state.oldUrl)
  {
    // If url changed
    if(/youtube.com/.test(e.url)) // RegExp
    {
        this.refs.WEBVIEW_REF.goBack()
        Linking.canOpenURL(e.url).then(supported => {
          if (supported) return Linking.openURL(e.url)
        })
    }
    this.setState({ oldUrl: e.url })
  }
}

解决方案 2：

考虑查看this PR 以将本机shouldOverrideUrlLoading 方法暴露给JS。这样做可能有点复杂。