从 React Native App 中的 WebView 打开动态链接

Question

我需要使用网站上的用户选择打开一个应用程序屏幕，当用户选择一个项目时，它应该在移动应用程序中打开相关页面。 但是该网站应该在同一个应用程序内的 webview 中加载。 在这里，我使用 Firebase 动态链接来管理此导航。

我可以在模拟器中从 chrome 浏览器打开网站，并根据需要打开导航到确切页面的应用程序。 但是，当我从应用程序内的 webview 中单击相同的组件时，它会引发以下错误，并且应用程序不会打开 firebase 动态链接应该打开的页面，就像在 chrome 浏览器的第一种情况下一样。

Can't open url: intent://example.page.link/getapp#Intent;package=com.google.android.gms;action=com.google.firebase.dynamiclinks.VIEW_DYNAMIC_LINK;scheme=https;S.browser_fallback_url=https://play.google.com/store/apps/details%3Fid%3Dcom.ubercab;end;

我的实现如下，

网络应用

App.js

function App() {  

  return (

    <div>
      <Button variant="primary">
        Open this in your App
      </Button>
      <Banner url={"https://testingapp.page.link/getapp"}/>
    <Banner url={"https://testingapp.page.link/getapp"}/>
    <Banner url={"https://testingapp.page.link/getapp"}/>
    <Banner url={"https://testingapp.page.link/getapp"}/>
    </div>

  );
}

横幅.js

const Banner=(props)=>{
    const classes = useStyles();
    const [expanded, setExpanded] = React.useState(false);

    const styles = {
        cardAction: {
            display: 'block',
            textAlign: 'initial',
            height: '100%'
        }
    }



  return (
      <div onClick={() => window.open(props.url, "_blank")}>
          <Card className={classes.root}>
              <CardMedia
                  className={classes.media}
                  image= {banner}
                  title="Offer"
              />
          </Card>
      </div>

  );
        };

export default Banner;

在移动应用方面：

App.jsx

import React, { useEffect } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import dynamicLinks from '@react-native-firebase/dynamic-links';
import { WebView } from 'react-native-webview';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

function HomeScreen({ navigation }) {
  async function buildLink() {
    console.log('building link');
    const link = await dynamicLinks().buildLink({
      link: 'https://invertase.io',
      // domainUriPrefix is created in your firebase console
      domainUriPrefix: 'https://testingapp.page.link',
      // optional set up which updates firebase analytics campaign
      // "banner". This also needs setting up before hand
      analytics: {
        campaign: 'banner',
      },
    });

    return link;
  }


  const handleDynamicLink = link => {
    // Handle dynamic link inside your own application
    console.log('Received URfffL:' + link.url);
    if (link.url === 'https://example.com/packageview') {
      console.log('hit package view');
      navigation.push('packageview');
    }
  };

  useEffect(() => {
    const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
    // When the is component unmounted, remove the listener

    dynamicLinks()
      .getInitialLink()
      .then(link => {
        console.log('Received URL:' + link.url);
        if (link.url === 'https://example.com/packageview') {
          console.log('hit package view');
          navigation.push('packageview');
        }
      });


    return () => unsubscribe();


  }, []);
  return (   
      <WebView source={{ uri: 'http://10.0.2.2:3000/' }}/>   
  );
}


export default function App() {



  const Stack = createStackNavigator();

    return (
      <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="packageview" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
    );

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

有没有人有这方面的经验？这里出了什么问题？

Answer 1

有一个解决方案，但更像是一种解决方法，所以看起来 webview 阻塞了带有“intent://”头的请求，因为解决方案“intent://”可以添加到 WebView 的白名单中。检查下面的代码，

 <WebView      
      originWhitelist={['intent://']}
      source={{ uri: 'http://10.0.2.2:3000/' }}/>   

但用户体验可能不是那么好，因为这会使 URL 从 Web 浏览器打开，而 Web 浏览器将导航到应用程序内的页面。