我正在创建基于电子商务应用程序的react native。这里我需要从url shared打开单个产品页面。实际上，当应用程序处于终止状态时，它会工作，但如果应用程序处于后台/非活动状态，它就不会工作。在后台/非活动状态下打开时，共享url变为null。我已附上我的代码。
// following code working for app killing state
componentWillMount() {
if (Platform.OS === 'android') {
console.log("Testing");debugger
//Constants.OneTimeFlag == false;
Linking.getInitialURL().then(url => {
console.log(url);
var str = url
var name = str.split('/')[4]
Constants.isLinking = true;
this.setState({ shop_Id: name})
if (str)
{
this.setState({ isFromHomeLinking:'FROM_LINK' })
this.props.navigation.navigate('SingleProductScreen', { ListViewClickItemHolder: [this.state.shop_Id,1,this.state.isFromHomeLinking] });
}
});
}
else {
Linking.addEventListener('url', this.handleNavigation);
}
}
Not working code following..
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
this.state.appState declared in constructor(props)
_handleAppStateChange = (nextAppState) => {
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
console.log('App has come to the foreground!');debugger
if (Platform.OS === 'android') {
console.log("Testing");debugger
//Constants.OneTimeFlag == false;
Linking.getInitialURL().then(url => {
console.log(url);
var str = url
var name = str.split('/')[4]
Constants.isLinking = true;
this.setState({ shop_Id: name})
if (str)
{
this.setState({ isFromHomeLinking:'FROM_LINK' })
this.props.navigation.navigate('SingleProductScreen', { ListViewClickItemHolder: [this.state.shop_Id,1,this.state.isFromHomeLinking] });
}
});
}
else {
Linking.addEventListener('url', this.handleNavigation);
}
}
}
当我在后台打开whatsapp和应用程序的外部链接时，Linking.getInitialURL((接收为null。。
以下是我在清单文件
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize"
android:launchMode="singleTask">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="http"
android:host="demo1.zgroo.com" />
</intent-filter>
</activity>
以下是我的示例URL。。
http://demo1.zgroo.com/xxxx
请告诉我任何解决方案。。
提前谢谢。。
您需要为这种情况注册Linking监听器。
componentDidMount() {
Linking.addEventListener('url', this._handleOpenURL);
},
componentWillUnmount() {
Linking.removeEventListener('url', this._handleOpenURL);
},
_handleOpenURL(event) {
console.log(event.url);
}
了解更多信息https://facebook.github.io/react-native/docs/linking
以下是Anurag使用钩子的答案版本：
export function useDeepLinkURL() {
const [linkedURL, setLinkedURL] = useState<string | null>(null);
// 1. If the app is not already open, it is opened and the url is passed in as the initialURL
// You can handle these events with Linking.getInitialURL(url) -- it returns a Promise that
// resolves to the url, if there is one.
useEffect(() => {
const getUrlAsync = async () => {
// Get the deep link used to open the app
const initialUrl = await Linking.getInitialURL();
setLinkedURL(decodeURI(initialUrl));
};
getUrlAsync();
}, []);
// 2. If the app is already open, the app is foregrounded and a Linking event is fired
// You can handle these events with Linking.addEventListener(url, callback)
useEffect(() => {
const callback = ({url}: {url: string}) => setLinkedURL(decodeURI(url));
Linking.addEventListener('url', callback);
return () => {
Linking.removeEventListener('url', callback);
};
}, []);
const resetURL = () => setLinkedURL(null);
return {linkedURL, resetURL};
}
然后你可以使用它：
const {linkedURL, resetURL} = useDeepLinkURL();
useEffect(() => {
// ... handle deep link
resetURL();
}, [linkedURL, resetURL])
我添加了函数resetURL，因为如果一个用户与应用程序共享同一个文件两次，你会想加载两次。然而，因为深度链接最终会是相同的，所以useEffect不会再次被触发。您可以通过将linkedURL设置为null来再次触发它，因此下次共享文件时，您可以确保它会导致useEffect运行。
此外，我使用decodeURI对传入的URL进行解码，因为如果使用类似react native fs的库从指定路径加载文件，则除非使用decodeURI，否则它将无法处理名称中有空格的文件。
从componentwillunmount中删除侦听器。无需在componentwillunmount中编写任何代码，因为链接的addListener将始终侦听，只有当您从后台(通过单击新的深度链接(进入活动状态时才会触发。