Imagine you have an eCommerce app named ShopEasy, and you want users who click on product links in emails, messages, or social media to be redirected directly to the relevant product page in the app, instead of the website.
Open Graph is a protocol used by web developers to control how URLs are represented when shared on social media platforms like Facebook, Twitter, LinkedIn, and others. By using Open Graph tags in the HTML of a webpage, you can dictate what content will be shown in the preview when a user shares the link.
To use these OpenGraph tags in a React Native app, you would handle the links to your server (such as https://ShopEasy.com/${type}/${id}) using deep linking or universal links. When users share these links, platforms like Facebook, Twitter, or iMessage will automatically display the content preview based on the OpenGraph tags you've defined.
/routes/share.js
const express = require('express');
const app = express();
const path = require('path');
// Serve static files (e.g., images, CSS, JavaScript)
app.use(express.static(path.join(__dirname, 'public')));
// Route to serve the OpenGraph meta tags
app.get('/:type/:id', (req, res) => { // type: product/category
const productId = req.params.id;
// Fetch product details from a database or API (placeholder data for this example)
const product = {
id: productId,
name: 'Sample Product',
description: "'This is a sample product description.',"
imageUrl: 'https://ShopEasy.com/images/sample-product.jpg',
price: '$19.99',
};
// Serve HTML with OpenGraph meta tags
res.send(`
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>掌握 React Native 中的深度連結和通用連結：OpenGraph Share 和 Node.js 集成</title>
<!-- OpenGraph Meta Tags -->
<meta property="og:title" content="掌握 React Native 中的深度連結和通用連結：OpenGraph Share 和 Node.js 集成">
<meta property="og:description" content="${product.description}">
<meta property="og:image" content="${product.imageUrl}">
<meta property="og:url" content="https://example.com/product/${product.id}">
<meta property="og:type" content="product">
<meta property="og:price:amount" content="${product.price}">
<meta property="og:price:currency" content="USD">
<!-- Twitter Card Meta Tags (optional) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="掌握 React Native 中的深度連結和通用連結：OpenGraph Share 和 Node.js 集成">
<meta name="twitter:description" content="${product.description}">
<meta name="twitter:image" content="${product.imageUrl}">
<h1>掌握 React Native 中的深度連結和通用連結：OpenGraph Share 和 Node.js 集成</h1>
<p>${product.description}</p>
<img src="%24%7Bproduct.imageUrl%7D" alt="掌握 React Native 中的深度連結和通用連結：OpenGraph Share 和 Node.js 集成">
<p>Price: ${product.price}</p>
`);
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
The apple-app-site-association (AASA) file is a JSON file that tells iOS which URLs should open your app. Here's how you might set it up for your eCommerce app:
{
"applinks": {
"apps": [],
"details": [
{
"appIDs": ["ABCDE12345.com.shopeasy.app"],
"paths": [
"/product/*",
"/category/*",
"/cart",
"/checkout"
]
}
]
}
}
After you construct the association file, place it in your site’s .well-known directory. The file’s URL should match the following format:
https://
You must host the file using https:// with a valid certificate and with no redirects.
i) Open Xcode:
Open your ShopEasy project in Xcode.
ii) Add Associated Domains Capability:
Go to the "Signing & Capabilities" tab.
Click the "+" button and add "Associated Domains."
iii) Add Your Domain:
Under the Associated Domains section, add your domain prefixed with applinks:.
For example:
i) Service applinks: Used for deep linking and app-to-web interaction, allowing your app to handle specific URLs directly.
ii) Service webcredentials: Used to enable AutoFill for credentials, allowing users to seamlessly use saved passwords across your app and website.
For dev:
applinks:shopeasy webcredentials:shopeasy
For production:
applinks:shopeasy.com webcredentials:shopeasy.com
where:
CFBundleURLName: A human-readable name for the URL scheme. This can be any descriptive string.
CFBundleURLSchemes: The actual URL scheme your app supports. It should be a unique string like shopeasy/showeasy.com(if production set).
<array>
...
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>shopeasy</string>
<key>CFBundleURLSchemes</key>
<array>
<string>shopeasy</string>
</array>
</dict>
</array>
#import <react>
// ...
// Add Below Code for DeepLinks
- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary<uiapplicationopenurloptionskey> *)options
{
return [RCTLinkingManager application:application openURL:url options:options];
}
- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
restorationHandler:(nonnull void (^)(NSArray<id>> * _Nullable))restorationHandler
{
return [RCTLinkingManager application:application
continueUserActivity:userActivity
restorationHandler:restorationHandler];
}
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}
//DEEP LINKS TILL HERE
@end
</id></uiapplicationopenurloptionskey></react>This should open the app.
npx uri-scheme open "shopeasy://product/mobile" --ios
or
xcrun simctl openurl booted "shopeasy://product/mobile"
<application... ... android:launchmode="singleTask">
<!-- DEEP LINKS HERE -->
<intent-filter>
<action android:name="android.intent.action.VIEW"></action>
<category android:name="android.intent.category.DEFAULT"></category>
<category android:name="android.intent.category.BROWSABLE"></category>
<data android:scheme="shopeasy"></data>
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW"></action>
<category android:name="android.intent.category.DEFAULT"></category>
<category android:name="android.intent.category.BROWSABLE"></category>
<data android:scheme="http"></data>
<data android:scheme="https"></data>
<data android:host="localhost"></data>
<!-- REPLACE the HOST with app domain like shopeasy.com -->
</intent-filter>
<!-- DEEP LINKS HERE -->
/>
</application...>ii) Check in android:
adb shell am start -W -a android.intent.action.VIEW -d "shopeasy://product/apple" com.shopeasy
or
Click on this link in emulator if route is working:
http://localhost:3000/share/product/iphone
Navigation.jsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import MainNavigator from './MainNavigator';
import { navigationRef } from '../utils/NavigationUtil';
const config = {
screens: {
ProductScreen: '/product/:id',
CategoryScreen: '/category/:name',
},
};
const linking = {
prefixes: ['shopeasy://', 'https://shopeasy.com', 'http://localhost:3000'],
config,
};
const Navigation: React.FC = () => {
return (
<navigationcontainer linking="{linking}" ref="{navigationRef}">
<mainnavigator></mainnavigator>
</navigationcontainer>
);
};
export default Navigation;
App.jsx
useEffect(() => {
// Retrieve the initial URL that opened the app (if any) and handle it as a deep link.
Linking.getInitialURL().then(url => {
handleDeepLink({ url }, 'CLOSE'); // Pass the URL and an action ('CLOSE') to handleDeepLink function.
});
// Add an event listener to handle URLs opened while the app is already running.
Linking.addEventListener('url', event => handleDeepLink(event, 'RESUME'));
// When the app is resumed with a URL, handle it as a deep link with the action ('RESUME').
// Cleanup function to remove the event listener when the component unmounts.
return () => {
Linking.removeEventListener('url', event => handleDeepLink(event, 'RESUME'));
};
}, []);
CLOSE/RESUME is optional and is passed handle as per requirement.
以上是掌握 React Native 中的深度連結和通用連結：OpenGraph Share 和 Node.js 集成的詳細內容。更多資訊請關注PHP中文網其他相關文章！
