Original address: http://liu-hang.cn/2019/06/04/183-RN-open-app-except-page-from-webpage-or-otherapp/

APP environment

  • The react 0.59.5
  • The react – navigation 3.9.1
  • The react – navigation – story – helpers 3.0.2

The React Native implementation

I use react-navigation to manage routes. The react-navigation itself supports Deep Linking, but I use react-navigation-redux-helpers to package routes under REdux. Therefore, the deep-linking function of react-navigation itself cannot be used. I found other solutions under the issue of react-navigation-redux-helpers.

// To listen for actions invoked by the APP from the background, I use AppState and use Linking to get the URL. Then submit the preliminary resolution of the obtained address to the LinkRoutes method import {Linking, AppState} from'react-native'
import LinkRoutes from './src/routes/linkRoutes'.componentDidMount(){
  AppState.addEventListener('change', this._handleAppStateChange)
}
componentWillUnmount(){
  AppState.removeEventListener('change', this._handleAppStateChange)
}
_handleAppStateChange = (nextAppState) => {
  if(nextAppState==='active'){
    Linking.getInitialURL().then(res => {
      if(!!!!! res){ LinkRoutes(res.split('/'.)[1])}})}}...Copy the code
// LinkRoutes // LinkRoutes // LinkRoutes // LinkRoutes // LinkRoutes // LinkRoutes // LinkRoutes // LinkRoutes // LinkRoutes // LinkRoutes // Use Dispatch to jump to a specified page import PathParser from'path-parser'
import { NavigationActions } from 'react-navigation'
import store from '.. /reducers'
import _ from 'lodash'

const paths = [
  {
    routeName: 'Page',
    path: new PathParser('/page')
  }
]

const findPath = url => {
  let idx = _.findIndex(paths, p => {
    return p.path.test(url)
  })
  return idx > -1 ? paths[idx] : false
}

export default url => {
  const pathObj = findPath(url)
  if(! pathObj)return
  const navigateAction = NavigationActions.navigate({
    routeName: pathObj.routeName,
    params: pathObj.path.test(url)
  })
  store.dispatch(navigateAction)
}
Copy the code

IOS configuration

// Modify appdelagate. m to add#if __IPHONE_OS_VERSION_MAX_ALLOWED > 100000// latest system callback - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options { BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url options:options];if(! Result) {// Other SDK callbacks such as payment}return result;
}
#endif// Support all iOS systems, this method is deprecated in Swift4.1 (Xcode 9.3), objective-C projects do not affect. - (BOOL)application:(UIApplication *)application openURL:(NSURL *)urlsourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url sourceApplication:sourceApplication annotation:annotation];
  if(! Result) {// Other SDK callbacks such as payment}return result;
}

- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
{
  BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];
  if(! Result) {// Other SDK callbacks such as payment}return result;
}
Copy the code

Then, modify the Url Types to add myApp

Test instruction

xcrun simctl openurl booted myapp://
Copy the code

IOS simulator is Linking to capture the URL, so I tested it on the phone after packaging

Android configuration

Add the configuration under.mainActivity. You can also set host, path, etc., but since I’m parsing through RN, I won’t add it here

<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="myapp" />
</intent-filter>
Copy the code

Test instruction

adb shell am start -W -a android.intent.action.VIEW -d "myapp://" com.myapp
Copy the code

Refer to the article

  • React Navigation Deep linking
  • Redux can not be used with deep linking
  • React Native allows the browser to wake up the APP and redirect to a specific page