React Native WebView 无法从模拟器中的电子邮件深层链接打开

Question

无法在 iOS 模拟器中使用电子邮件中的深层链接打开 React Native WebView

我正在开发一个

React Native

应用程序，其中

WebView

应显示密码重置页面。此页面在开发过程中在本地托管

http://localhost:3000/reset-password

。目标是当用户单击电子邮件中的深层链接时在我的应用程序中打开此

WebView

。每当用户尝试设置密码时，都会向该用户发送电子邮件。我使用

AWS

执行此操作，发送给用户以重置密码的链接如下：

链接：http://localhost:3000/reset-password?token=${jwt.sign({ data: userMatch }, config.app.secret, {expiresIn: "1h", 算法：config.app.algorithm})}

什么有效

当我在应用程序中手动导航到

WebView

时，它会正确加载。 我的网页内容和

React Native

组件之间的通信正常；我可以从 WebView 导航回登录屏幕。

什么不起作用

单击电子邮件中的深层链接时，该链接会在我的应用程序外部的浏览器中打开，而不是导航到应用程序内的

WebView

。

我的 DeepLinking 配置位于 App.tsx

const linking = {
  prefixes:["localhost:3000","yourapp://"],
  config:{
    screens:{
      // Reset:"reset-password",
      Local:"reset-password"
    }
  }
}

const App = () => {
  const [initialURL, setInitialURL] = useState(null);
  useEffect(() => {
    Linking.getInitialURL().then((url:any) => {
      if (url) {
        setInitialURL(url);
      }
    });
  }, []);

  return (
    <>
    <QueryClientProvider client={queryClient}>
    <StatusBar  backgroundColor="white" barStyle="dark-content" ></StatusBar>
    <NavigationContainer linking={linking}>
     <Stack.Navigator initialRouteName='Login' screenOptions={{ headerStyle :{
      backgroundColor: 'white',
    }}}>
    <Stack.Screen name="Login" component={LoginScreen} initialParams={{ initialURL }} options={{headerShown:false}} />
    <Stack.Screen name="Home" component={MyTabs} options={{ headerShown: false}}/> 
    <Stack.Screen name="Reset" component={ResetPasswordScreen} options={{headerShown:false}}/>
    <Stack.Screen name="Local" component={LocalWebViewScreen} options={{headerShown:false}} />
    </Stack.Navigator>
    </NavigationContainer>
    </QueryClientProvider>
  </>
  )
}

const styles= StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'#121212',
  }
})

export default App;

/// 这是渲染我在 localhost:3000 上运行的 React 网页的

LocalWebviewComponent

LocalWebview.tsx

const LocalWebViewScreen = ({route}:any) => {
    const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
    const webViewRef = useRef(null);

    const handleMessage = (event:any) => {
        const message = event.nativeEvent.data
        if(message === "navigateBack"){
            console.warn("they are communicating")
            navigation.navigate("Login")
        }
    }
    const token = route.params?.jwt 
    const url = `http://localhost:3000/reset-password?token=${token}`;
  return (
  <WebView
    javaScriptEnabled={true}
    domStorageEnabled={true}
    startInLoadingState={true}
    ref={webViewRef}
    source={{ uri: url }} 
    onMessage={handleMessage}
   />
  );
};

export default LocalWebViewScreen;

Answer 1

据我所知，您无法通过 e2e 在 iOS 模拟器上测试深层链接。 如果您想测试是否可以处理链接，请使用

npx uri-scheme open "exp://127.0.0.1:19000/--/reset-password" --ios

文档在

这里