Я реализовал функцию совместного использования в своем React Native. Когда я нажимаю кнопку «Поделиться» в своем приложении, открывается меню «Поделиться», включая мое приложение и другие. Я хочу направлять пользователей на определенный экран (например, экран сообщений) в моем приложении React Native, когда они выбирают мое приложение из этого меню общего доступа. Как я могу добиться этого перенаправления в React Native?
AndroidManifest.xml
<manifest xmlns:android = "http://schemas.android.com/apk/res/android">
<uses-permission android:name = "android.permission.INTERNET"/>
<uses-permission android:name = "android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name = "android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name = "android.permission.VIBRATE"/>
<uses-permission android:name = "android.permission.WRITE_EXTERNAL_STORAGE"/>
<queries>
<intent>
<action android:name = "android.intent.action.VIEW"/>
<category android:name = "android.intent.category.BROWSABLE"/>
<data android:scheme = "https"/>
</intent>
</queries>
<application android:name = ".MainApplication" android:label = "@string/app_name" android:icon = "@mipmap/ic_launcher" android:roundIcon = "@mipmap/ic_launcher_round" android:allowBackup = "true" android:theme = "@style/AppTheme">
<meta-data android:name = "expo.modules.updates.ENABLED" android:value = "false"/>
<meta-data android:name = "expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value = "ALWAYS"/>
<meta-data android:name = "expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value = "0"/>
<activity android:name = ".MainActivity" android:configChanges = "keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode = "singleTask" android:windowSoftInputMode = "adjustResize" android:theme = "@style/Theme.App.SplashScreen" android:exported = "true" android:screenOrientation = "portrait">
<intent-filter>
<action android:name = "android.intent.action.MAIN"/>
<category android:name = "android.intent.category.LAUNCHER"/>
<data android:scheme = "com.my.AppShare" />
</intent-filter>
<intent-filter>
<action android:name = "android.intent.action.SEND" />
<category android:name = "android.intent.category.DEFAULT" />
<data android:mimeType = "*/*" />
</intent-filter>
</activity>
<activity android:name = "com.facebook.react.devsupport.DevSettingsActivity" android:exported = "false"/>
</application>
</manifest>
Приложение.js
import HomeScreen from "./src/components/HomeScreen";
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { Text, View } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
const Stack = createStackNavigator();
export default function App() {
const navigationRef = React.useRef(null);
return (
<NavigationContainer ref = {navigationRef}>
<Stack.Navigator
initialRouteName = "Home"
screenOptions = {{ headerShown: false }}
>
<Stack.Screen name = "Home" component = {HomeScreen} />
<Stack.Screen name = "Message" component = {MessageScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
HomeScreen.jsx
export default function HomeScreen() {
const onShare = async () => {
try {
const options = {
title: "Share via",
message: "Check this out!",
url: "http://example.com",
};
Share.open(options);
} catch (err) {
console.info(err);
}
};
return (
<View>
<TouchableOpacity onPress = {() => onShare()}>
<Entypo name = "share" size = {24} color = "black" />
<Text>Share</Text>
</TouchableOpacity>
</View>
);
};
MessgeScreen.jsx
export default function MessageScreen({ route, navigation }) {
return (
<View>
<Text>Message Screen</Text>
</View>
);
}
Я ожидал, что выбор моего приложения в меню «Поделиться» перенаправит пользователей на определенный экран (например, экран сообщений) в моем приложении.
Однако когда я выбираю свое приложение в меню «Поделиться», оно не перенаправляется на нужный экран. Вместо этого приложение открывается в обычном режиме, без перехода к конкретному экрану. Я ищу способ правильно обработать это намерение и перейти к конкретному экрану в React Native.
Для перенаправления на определенный экран необходимо реализовать глубокие ссылки в приложении.
К сожалению, я не могу предоставить вам весь код, но вы можете обратиться к этому блогу за дополнительной информацией и примерами.
В моем случае я нашел решение этой проблемы. В моемMainActivity.kt
мне нужно обработать намерение в методах onCreate и onNewIntent.
override fun onCreate(savedInstanceState: Bundle?) {
setTheme(R.style.AppTheme)
super.onCreate(null)
handleIntent(intent)
}
override fun onNewIntent(intent: Intent?) {
super.onNewIntent(intent)
handleIntent(intent)
}
private fun handleIntent(intent: Intent?) {
if (intent?.action == Intent.ACTION_SEND) {
val sharedText = intent.getStringExtra(Intent.EXTRA_TEXT)
sharedText?.let {
val reactContext = reactInstanceManager.currentReactContext
reactContext?.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
?.emit("appOpenedWithShare", it)
}
}
}
И добавьте прослушиватель событий для обработки события, когда приложение открывается с общим текстом.
useEffect(() => {
const { DeviceEventManagerModule } = NativeModules;
const eventEmitter = new NativeEventEmitter(DeviceEventManagerModule);
const subscription = eventEmitter.addListener(
"appOpenedWithShare",
(sharedText) => {
if (navigationRef.current) {
navigationRef.current.navigate("Message", { sharedText });
}
}
);
return () => {
subscription.remove();
};
}, []);
Это отличное предложение!