React-Native Kakao Link Module
/android ํจํค์ง ์ด๋ฆ์ ๋ณ๊ฒฝํ์ต๋๋ค.
com.reactlibrary => co.jootopia.kakao.link
react-native-kakao-plus-friend ์ ๊ฐ์ด ์ฌ์ฉํ์๋๊ฒฝ์ฐ ํจํค์ง๋ช ์ค๋ณต์ผ๋ก ๋น๋ ์๋ฌ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค! ์ด๋ฐ ๊ฒฝ์ฐ ์๋์ผ๋ก ํจํค์ง๋ช ์ ๋ฐ๊ฟ์ฃผ์ ์ผํฉ๋๋ค..!
์๋ ํ์ธ์. ์ 1๋ณ์ผ๋ก ๋ชจ๋๊ฐ ์ด๊นจ์ถค์ ์ถ๊ฒํ๋ '๊ฝ์' ์๋น์ค๋ฅผ ์ค๋น์ค์ธ JOOTOPIA์ ๋๋ค. RN์ผ๋ก ์๋น์ค๋ฅผ ๊ฐ๋ฐํ๋ ์ค ์นด์นด์ค๋งํฌ ๊ธฐ๋ฅ์ด ํ์ํ์ฌ ๋ณธ ๋ชจ๋์ ์ ์ํ๊ฒ ๋์์ต๋๋ค.
์ง์ํ์ง ์๋ ๊ธฐ๋ฅ ๋ฐ ์ค๋ฅ๊ฐ ์์ผ์๋ฉด ์ด์๋์ ๋จ๊ฒจ์ฃผ์๊ธฐ ๋ฐ๋๋๋ค.
์ฐธ๊ณ ํ์ค ์ฌํญ์ผ๋ก๋ ๋ณธ๋ ํจํค์ง ์ด๋ฆ์ react-native-kakao-link ํจํค์ง๋ก ํ๊ณ ์ถ์์ผ๋ npm์ ๋ฑ๋ก์ด ๋ถ๊ฐํ์ฌ ํจํค์ง๋ช ์ react-native-kakao-links๋ก ์ง์ ํ์์ต๋๋ค. ๊ทธ๋ฌํ ํ์ (?)์ผ๋ก Android ํจํค์ง ๋ฐ IOS ํจํค์ง ๋ช ์ RNKakaoLinks ๊ฐ ์๋ RNKakaoLink ์ ๋๋ค. Manual installation ๋ฐ ์ฌ์ฉ์ ์ ์ํ์๊ธฐ ๋ฐ๋๋๋ค.
$ npm install react-native-kakao-links --save
react-native link ๋ฅผ ์ด์ฉํ์๋ฉด ๋น ๋ฅธ ์ค์น๊ฐ ๊ฐ๋ฅํฉ๋๋ค.
$ react-native link react-native-kakao-links
์ react-native link ๋ฅผ ์ฌ์ฉํ์์ง ์๋ ๋ถ๋ค์ ๋ณธ ๋ชจ๋์ IOS, Android์ ์ฌ์ฉํ๊ธฐ์ํด ์๋์ ๊ฐ์ ๋งํฌ ์ ์ฐจ๋ฅผ ๊ฑฐ์ณ์ผ ํฉ๋๋ค.
- In XCode, in the project navigator, right click
Libraries
โAdd Files to [your project's name]
- Go to
node_modules
โreact-native-kakao-links
and addRNKakaoLink.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNKakaoLink.a
to your project'sBuild Phases
โLink Binary With Libraries
- Run your project (
Cmd+R
)<
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.reactlibrary.RNKakaoLinkPackage;
to the imports at the top of the file - Add
new RNKakaoLinkPackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-kakao-links' project(':react-native-kakao-links').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-kakao-links/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-kakao-links')
์นด์นด์ค๋งํฌ ๊ณต์๊ฐ์ด๋ https://developers.kakao.com/docs/ios/kakaotalk-link ๋ฅผ ์ฐธ๊ณ ํ์ ์ ๋ชจ๋์ ์ฌ์ฉํ๊ธฐ์ํ KakaoSDK๋ฅผ ์ค์นํ์๊ธฐ ๋ฐ๋๋๋ค.
Note: CocoaPod ์ฌ์ฉ์ค์ธ ๊ฒฝ์ฐ /ios/Podfile
์ pod 'KakaoOpenSDK'
๋ฅผ ์ถ๊ฐํ๊ณ pod install๋ก Kakao SDK๋ฅผ ์ค์นํ ์ ์์ต๋๋ค.
์นด์นด์ค๋งํฌ ๊ณต์๊ฐ์ด๋ https://developers.kakao.com/docs/android/kakaotalk-link ๋ฅผ ์ฐธ๊ณ ํ์ ์ ๋ชจ๋์ ์ฌ์ฉํ๊ธฐ์ํ Kakao SDK๋ฅผ ์ค์นํ์๊ธฐ ๋ฐ๋๋๋ค.
์นด์นด์ค๋งํฌ ๊ณต์ ๊ฐ์ด๋์ ์ํ๋ฉด ์นด์นด์ค๋งํฌ๋ ๋ช๊ฐ์ง ์ง์ ๋ ํ ํ๋ฆฟ์ ์ด์ฉํ์ฌ ๋ฉ์์ง๋ฅผ ์ ์กํ๊ฒ ๋ฉ๋๋ค. ํ ํ๋ฆฟ ๋ฉ์์ง๋ฅผ ์์ฑํ๊ธฐ ์ํด์๋ ์๋ Object Type์ ์ด์ฉํ์ฌ ํ ํ๋ฆฟ์ ์์ฝ๊ฒ ์์ฑํ ์ ์์ต๋๋ค. ์๋ Object Type์ ๊ฐ์ง๊ณ ๋ฉ์์ง ํ ํ๋ฆฟ์ด ์ด๋ป๊ฒ ๊ตฌ์ฑ๋๋์ง๋ ๋ค์ ์น์ ์ ์ฐธ์กฐํด์ฃผ์ธ์.
type LinkObject={
webURL? :string, //optional
mobileWebURL? :string, //optional
androidExecutionParams?:string, //optional For Linking URL
iosExecutionParams? :string, //optional For Linking URL
};
type ContentObject = {
title : string, //required
link : LinkObject, //required
imageURL : string, //required
desc? : string, //optional
imageWidth? : number, //optional
imageHeight?:number //optional
}
type SocialObject ={
likeCount? :number,//optional
commentCount? :number,//optional
sharedCount? :number,//optional
viewCount? :number,//optional
subscriberCount? :number//optional
}
type ButtonObject = {
title : string,//required
link : LinkObject,//required
}
type CommerceDetailObject ={
regularPrice? :number, //required,
discountPrice? :number, //optional
discountRate? :number, //optional
fixedDiscountPrice? :number //optional
};
์นด์นด์ค๋งํฌ ๋ฉ์์ง๋ฅผ ์ ์ก์ ํ
ํ๋ฆฟ ์ข
๋ฅ์ ์๊ด์์ด RNKakaoLink.link( options );
๋ฅผ ์ฌ์ฉํฉ๋๋ค.
์ฌ๊ธฐ์ options๋ ์๋ 1~7 ์ Template Type์ ์๋ฏธํฉ๋๋ค.
์ ์ฒด ์ํ์ฝ๋๋ /examples/TemplateExamples.js
๋ฅผ ์ฐธ์กฐํด์ฃผ์ธ์.
Note : ๊ณต์ ๋ฌธ์์๋ ๋ฒํผ ์ด๋ฆ์ ์ง์ ํ๋ buttonTitle ์ต์ ์ ์ง์ ํ ์ ์๋ค๊ณ ๋์์์ผ๋ sdk ์์ ์ด๋ฅผ ์ค์ ํ ์ ์๋ API๊ฐ ์กด์ฌํ์ง ์์ ๋ช ์ํ์ง ์์์ต๋๋ค. buttons ๋ฅผ ์ด์ฉํ์๊ธฐ ๋ฐ๋๋๋ค.
type FeedTemplate = {
objectType : 'feed', //required
content : ContentObject, //required
social? : SocialObject, //optional
buttons? : Array<ButtonObject> //optional
};
export default class TemplateExample extends Component {
linkFeed = async () => {
try{
const options = {
objectType:'feed',//required
content:contentObject,//required
social:socialObject,//optional
buttons:[buttonObject]//optional
};
const response = await RNKakaoLink.link(options);
console.log(response);
}catch(e){
console.warn(e);
}
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.linkFeed} style={styles.button}>
<Text style={styles.buttonText}>Feed</Text>
</TouchableOpacity>
</View>
);
}
}
type ListTemplate = {
objectType :'list', //required
headerTitle : string, //required
headerLink : LinkObject, //required
contents : Array<ContentObject>, //required
buttons? : Array<ButtonObject> //optional
};
export default class TemplateExample extends Component {
linkList = async () => {
try{
const options = {
objectType:'list',//required
headerTitle:'๋ฆฌ์คํธ ์ ๋ชฉ',//required
headerLink:linkObject,//required
contents:[contentObject,contentObject],//required
buttons:[buttonObject]//optional
};
const response = await RNKakaoLink.link(options);
console.log(response);
}catch(e){
console.warn(e);
}
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.linkList} style={styles.button}>
<Text style={styles.buttonText}>List</Text>
</TouchableOpacity>
</View>
);
}
}
type LocationTemplate = {
objectType :'location', //required
content : ContentObject, //required
address : string, //required
addressTitle? : string, //optional
buttons? : Array<ButtonObject> //optional
};
export default class TemplateExample extends Component {
linkLocation = async () => {
try{
const options = {
objectType:'location',//required
content:contentObject,//required
address:'์ค์ ์ฃผ์',//required
addressTitle:'์ฐ๋ฆฌ ์ง',//optional
buttons:[buttonObject]//optional
};
const response = await RNKakaoLink.link(options);
console.log(response);
}catch(e){
console.warn(e);
}
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.linkLocation} style={styles.button}>
<Text style={styles.buttonText}>Location</Text>
</TouchableOpacity>
</View>
);
}
}
type FeedTemplate = {
objectType : 'feed', //required
content : ContentObject, //required
commerce : CommerceObject, //required
buttons? : Array<ButtonObject> //optional
};
export default class TemplateExample extends Component {
linkCommerce = async () => {
try{
const options = {
objectType:'commerce',//required
content:contentObject,//required
commerce:commerceDetailObject,//required
// buttonTitle:'',//optional buttons๋ ์ฌ์ฉ ๋ถ๊ฐ.
buttons:[buttonObject]//optional
};
const response = await RNKakaoLink.link(options);
console.log(response);
}catch(e){
console.warn(e);
}
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.linkCommerce} style={styles.button}>
<Text style={styles.buttonText}>Commerce</Text>
</TouchableOpacity>
</View>
);
}
}
type TextTemplate = {
objectType : string, //required
text : string, //required
link : LinkObject,//required
buttons? : Array<ButtonObject>//optional
};
export default class TemplateExample extends Component {
linkText = async () => {
try{
const options = {
objectType:'text',//required
text:'ํ
์คํธ ์
๋ ฅ',//required
link:linkObject,//required
// buttonTitle:'',//optional buttons๋ ์ฌ์ฉ ๋ถ๊ฐ.
buttons:[buttonObject]//optional
};
const response = await RNKakaoLink.link(options);
console.log(response);
}catch(e){
console.warn(e);
}
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.linkText} style={styles.button}>
<Text style={styles.buttonText}>Text</Text>
</TouchableOpacity>
</View>
);
}
}
type Scrap = {
objectType : string, //required
url : string, //required
};
export default class TemplateExample extends Component {
linkScrap = async () => {
try{
const options = {
objectType:'scrap',//required
url:'https://developers.kakao.com',//required
};
const response = await RNKakaoLink.link(options);
console.log(response);
}catch(e){
console.warn(e);
}
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.linkScrap} style={styles.button}>
<Text style={styles.buttonText}>Scrap</Text>
</TouchableOpacity>
</View>
);
}
}
type CustomTemplate = {
objectType : 'feed', //required
templateId : string, //required
templateArgs : any, //required
buttons? : Array<ButtonObject> //optional
};
export default class TemplateExample extends Component {
linkCustom = async () => {
try{
const options = {
objectType:'custom',//required
templateId:'13671',//required
templateArgs:{
title:'์ปค์คํ
์ ๋ชฉ',//Your Param
desc:'์ปค์คํ
์ค๋ช
',//Your Param
}
};
const response = await RNKakaoLink.link(options);
console.log(response);
}catch(e){
console.warn(e);
}
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.linkCustom} style={styles.button}>
<Text style={styles.buttonText}>Custom</Text>
</TouchableOpacity>
</View>
);
}
}