使用域名进行深度链接
Deeplinking with a domain name
我的 App.js
中有以下代码:
import React, { useState, useRef, useEffect } from 'react';
import { SafeAreaView, Text } from 'react-native';
import { NavigationContainer, useLinking } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
const Screen1 = () => <SafeAreaView><Text>Screen1</Text></SafeAreaView>;
const Screen2 = () => <SafeAreaView><Text>Screen2</Text></SafeAreaView>;
export default function App() {
const ref = useRef();
const [isReady, setIsReady] = useState(false);
const [initialState, setInitialState] = useState();
const { getInitialState } = useLinking(ref, {
prefixes: ['http://example.com', 'mychat://'],
config: {
screens: {
Screen2: 'screen-2',
},
},
});
useEffect(() => {
getInitialState().then((state) => {
if (state !== undefined) setInitialState(state);
setIsReady(true);
});
}, [getInitialState]);
if (!isReady) return null;
return (
<NavigationContainer ref={ref} initialState={initialState}>
<Stack.Navigator>
<Stack.Screen name='Screen1' component={Screen1} />
<Stack.Screen name='Screen2' component={Screen2} />
</Stack.Navigator>
</NavigationContainer>
);
}
大部分复制自https://reactnavigation.org/docs/deep-linking/ and https://reactnavigation.org/docs/use-linking/。
文档里有prefixes: ['https://mychat.com', 'mychat://']
,我只是把https://mychat.com
改成了http://example.com
。但是好像不行。
当我在 Safari 中打开以下 link 时:
mychat://
(有效,被重定向到应用 Screen1)
mychat://screen-2
(有效,被重定向到应用 Screen2)
http://example.com
(仅在浏览器中打开 link,没有重定向到应用程序的弹出窗口)
我需要做哪些更改才能将域名重定向到移动应用程序?我错过了什么吗?
您需要使用您有权访问的域和服务器。
您的服务器需要托管几个文件,通常在 .well-known
目录中:
apple-app-site-association
(注意不需要 .json
)
assetlinks.json
您还需要在您的应用中为 iOS 启用一些权利,这可能也适用于 Android。在 iOS,这将启用 关联域 权利以及 webcredentials:yourdomain.com
的条目
文档非常好,可以帮助您了解实现通用链接需要做什么
- https://developer.apple.com/library/archive/documentation/General/Conceptual/AppSearch/UniversalLinks.html
- https://developer.android.com/training/app-links/verify-site-associations
示例:
我的 App.js
中有以下代码:
import React, { useState, useRef, useEffect } from 'react';
import { SafeAreaView, Text } from 'react-native';
import { NavigationContainer, useLinking } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
const Screen1 = () => <SafeAreaView><Text>Screen1</Text></SafeAreaView>;
const Screen2 = () => <SafeAreaView><Text>Screen2</Text></SafeAreaView>;
export default function App() {
const ref = useRef();
const [isReady, setIsReady] = useState(false);
const [initialState, setInitialState] = useState();
const { getInitialState } = useLinking(ref, {
prefixes: ['http://example.com', 'mychat://'],
config: {
screens: {
Screen2: 'screen-2',
},
},
});
useEffect(() => {
getInitialState().then((state) => {
if (state !== undefined) setInitialState(state);
setIsReady(true);
});
}, [getInitialState]);
if (!isReady) return null;
return (
<NavigationContainer ref={ref} initialState={initialState}>
<Stack.Navigator>
<Stack.Screen name='Screen1' component={Screen1} />
<Stack.Screen name='Screen2' component={Screen2} />
</Stack.Navigator>
</NavigationContainer>
);
}
大部分复制自https://reactnavigation.org/docs/deep-linking/ and https://reactnavigation.org/docs/use-linking/。
文档里有prefixes: ['https://mychat.com', 'mychat://']
,我只是把https://mychat.com
改成了http://example.com
。但是好像不行。
当我在 Safari 中打开以下 link 时:
mychat://
(有效,被重定向到应用 Screen1)mychat://screen-2
(有效,被重定向到应用 Screen2)http://example.com
(仅在浏览器中打开 link,没有重定向到应用程序的弹出窗口)
我需要做哪些更改才能将域名重定向到移动应用程序?我错过了什么吗?
您需要使用您有权访问的域和服务器。
您的服务器需要托管几个文件,通常在 .well-known
目录中:
apple-app-site-association
(注意不需要.json
)assetlinks.json
您还需要在您的应用中为 iOS 启用一些权利,这可能也适用于 Android。在 iOS,这将启用 关联域 权利以及 webcredentials:yourdomain.com
文档非常好,可以帮助您了解实现通用链接需要做什么
- https://developer.apple.com/library/archive/documentation/General/Conceptual/AppSearch/UniversalLinks.html
- https://developer.android.com/training/app-links/verify-site-associations
示例: