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

Question

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

我可以通过模拟器中的chrome浏览器打开网站，并根据需要打开导航到确切页面的App。但是，当我在应用程序内的Web视图中单击相同的组件时，它会引发以下错误，并且应用程序不会打开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;

我的实现如下，

WebApp

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>

  );
}

Banner.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/' }}/>   

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