React Native 앱 딥 링킹

이 게시물에서는 React Navigation을 사용하여 iOS 및 Android 용 React Native 앱에 딥 링크를 추가하는 방법을 빠르게 살펴 보겠습니다.

딥 링킹은 특정 URL이나 리소스를 사용하여 모바일에서 특정 페이지 나 화면을 여는 기술입니다. 따라서 딥 링크는 모바일에서 앱을 실행하는 대신 사용자를 앱 내의 특정 페이지로 연결하여 더 나은 경험을 제공 할 수 있습니다. 이 특정 페이지 또는 화면은 일련의 계층 적 페이지 아래에있을 수 있으므로 딥 링크에서 "딥"이라는 용어가 사용됩니다.

로드시 사용자를 앱의 특정 지점으로 전환하는 URL을 제공하는 것이 많은 경우가 있습니다.

예를 들어, 개인의 프로필이 있고 웹이나 다른 앱의 어딘가에 링크를 제공하고 싶다고 가정 해 보겠습니다. 그러면 사용자가 링크를 클릭 할 때 앱을 열뿐만 아니라 정확한 지점으로 이동할 수 있습니다. 우리가 가고 싶은 앱입니다.

이것이 딥 링킹이 무엇인지, 이것이 우리가이 포스트에서 살펴볼 것입니다.

연결 은 들어오는 연결된 URL을 수신 할 수있는 API를 제공하고 다음과 같이 URL을 처리 할 수 ​​있습니다.

componentDidMount() {  
Linking.addEventListener('url', this.handleOpenURL);
}
componentWillUnmount() {
  Linking.removeEventListener('url', this.handleOpenURL);
}
handleOpenURL(event) {
  console.log(event.url);
  const route = e.url.replace(/.*?:\/\//g, '');
  // do something with the url, in our case navigate(route)
}

peopleapp://people/0
peopleapp://people/1
peopleapp://people/2
..etc

새 React Native 앱을 만들고 react-navigation을 추가하여 시작하겠습니다.

react-native init PeopleApp

npm i -s react-navigation

yarn add react-navigation

router.js
home.js  
people.js

// index.ios.js or index.android.js
import { AppRegistry } from 'react-native';
import Router from './router';
AppRegistry.registerComponent('PeopleApp', () => Router);

// router.js
import React from 'react';
import {
  AppRegistry,
  Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Home from './home';
import People from './people';const Router = StackNavigator({
  Home: { screen: Home },
  People: { screen: People },
});
export default Router;

import React from 'react';
import { Platform, Text, Linking } from 'react-native';class Home extends React.Component {
  static navigationOptions = { // A
    title: 'Home',
  };
componentDidMount() { // B
  if (Platform.OS === 'android') {
    Linking.getInitialURL().then(url => {
      this.navigate(url);
    });
  } else {
      Linking.addEventListener('url', this.handleOpenURL);
    }
  }
  
componentWillUnmount() { // C
    Linking.removeEventListener('url', this.handleOpenURL);
  }
handleOpenURL = (event) => { // D
    this.navigate(event.url);
  }
navigate = (url) => { // E
    const { navigate } = this.props.navigation;
    const route = url.replace(/.*?:\/\//g, '');
    const id = route.match(/\/([^\/]+)\/?$/)[1];
    const routeName = route.split('/')[0];
  
    if (routeName === 'people') {
      navigate('People', { id, name: 'chris' })
    };
  }
render() {
    return <Text>Hello from Home!</Text>;
  }}
export default Home;

우리가 경우 B.는 Android, 우리는 즉시 전화를 navigate전달 방법 url. iOS를 사용하는 경우 handleOpenUrl수신 링크가 감지 될 때 호출 할 이벤트 리스너를 추가합니다 .

C. Linking listener를 삭제합니다. componentWillUnmount

D. handleOpenURL이 호출되면 이벤트 URL을 navigate메소드에 전달합니다 .

E. 먼저 URL을 구문 분석하여 ID와 경로 이름을 얻습니다. 그런 다음 경로 이름이과 같은지 확인하고 people, 그렇다면 People 구성 요소로 이동하여 id를 prop으로 전달합니다.

이제 people.js경로 ID를 기반으로 사람을 표시 할 구성 요소 로 이동하여 만들 수 있습니다 . 에people.js

import React from 'react';
import { Text, Image, View, StyleSheet } from 'react-native';const people = { // A
0: {
    name: 'Leela',
    image: 'http://vignette1.wikia.nocookie.net/en.futurama/images/d/d4/Turanga_Leela.png/revision/latest?cb=20150218013044',
  },
1: {
    name: 'Bender',
    image: 'https://vignette2.wikia.nocookie.net/en.futurama/images/4/43/Bender.png/revision/latest?cb=20150206072725',
  },
2: {
    name: 'Amy',
    image: 'https://i.ytimg.com/vi/4sCtTq7K3yI/hqdefault.jpg',
  },
3: {
    name: 'Fry',
    image: 'http://www.supergrove.com/wp-content/uploads/2017/03/fry-futurama-22-which-robot-from-quotfuturamaquot-are-you.jpg',
  }
}
class People extends React.Component {
  static navigationOptions = {
    title: 'People',
  };
render() {
    const { id } = this.props.navigation.state.params; // B
if (!people[id]) 
       return 
      <Text>Sorry, no data exists for this user</Text>return ( // C
      <View>
        <Text style={styles.text}>{people[id].name}</Text>
        <Image
          resizeMode="contain"
          style={styles.image}
          source={{ uri: people[id].image }}
        />
      </View>
    )
  }
}const styles = StyleSheet.create({
  text: {
    margin: 19,
    fontSize: 22,
  },
  image: {
    width: 400,
    height: 400,
  },
});export default People;

B. 우리는 id받을 소품을 분해합니다. 이 ID에 대한 사용자가 없으면 메시지가 표시됩니다.

C.를 사용하여 id올바른 사람을 참조하고 이미지와 이름을 표시합니다.

이제 기본 코드가 모두 설정되었으므로 이제 iOS와 Android를 모두 구성하여 딥 링크를 활성화해야합니다.

iOS 구성

1 단계. URL 유형 추가 info.plist

  1. 파일을 열고 info.plist파일 상단에서라는 새 속성을 만듭니다.URL types

3. 0앱에 연결할 이름을 지정합니다. 우리의 경우 peopleapp이름으로 선택했습니다 .

----> peopleapp앱을 식별하는 데 사용됩니다. 이 식별자가 설정되면 다음과 같이 웹 브라우저 및 기타 앱의 애플리케이션 외부에서이를 참조 할 수 있습니다.peopleapp://someurl/someotherinfo/… <-----

2 단계. 다음 코드를 추가합니다. AppDelegate.m

마지막 기존 가져 오기 아래에 다음 가져 오기를 추가하십시오.

#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url  options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {  return [RCTLinkingManager application:app openURL:url options:options]; }

이제 safari 또는 chrome을 열고 다음 URL을 전달할 수 있습니다.

peopleapp://people/0

Android 구성

먼저 Manifest 파일을 열고 참조 할 앱 이름을 추가해야합니다 peopleapp.

에서 android/app/src/main, 개방 AndroidManifest.xml과 <활동> 태그 내에서, 마지막 텐트 필터 아래에 다음과 같은 텐트 필터가 이미 목록에 추가

<intent-filter android:label="filter_react_native">
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="peopleapp" android:host="people" /> // A
</intent-filter>

<data> 태그는 인 텐트 필터가 추가 된 활동으로 확인되는 URL 스키마를 지정합니다. 이 예에서 인 텐트 필터는로 시작하는 URI를 허용합니다 peopleapp://people. 이 구성에 대해 자세히 알아 보려면 문서를 확인하십시오 .

이것이 구성에 관한 한 우리가 필요로하는 전부입니다. 이를 테스트하려면 Android Studio를 엽니 다. Run-> Edit Configurations를 열고 시작 옵션을 URL로 변경 하여 다음 URL을 전달합니다.peopleapp://people/1

이제 앱을 실행하면 Bender가 표시됩니다!

이 예제의 최종 코드는 여기 에서 찾을 수 있습니다 .

Suggested posts

React 자습서가 가르치지 않는 5 가지 주요 교훈

React 자습서가 가르치지 않는 5 가지 주요 교훈

React 개발자가 알아야 할 필수 개념과 교훈이 많이 있지만 대부분의 튜토리얼에서는 다루지 않습니다. 나는 당신이 알아야 할 가장 중요한 주제 중 일부를 직접 골랐지만, 자세히 다루기 위해 시간을 할애 한 기사는 거의 없습니다.

Redux 툴킷에 대한 간단한 가이드

configureStore에서 createSlice로

Redux 툴킷에 대한 간단한 가이드

소개 Redux는 저장소와 감속기를 사용하여 애플리케이션의 전역 상태를 관리하는 Javascript 라이브러리입니다. 프론트 엔드 프레임 워크 'React'는 상태 관리에 매우 능숙하기 때문에 Redux와 React는 서로에게 완벽하게 맞습니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.