RN - PlayStore/AppStore 내 앱 별점주기 Link

React Native Setting 화면에서

내 앱 별점주기로 이동 하는 코드 입니다.

당연히 전제 조건은 이미 store 에 release 된 app 이어야 하고,

내 앱 store url 을 알아야 합니다.

스토어 들어가서 내 앱 화면 공유하기 하면 url 이 나오는데 이를 복사 하면 됩니다.

 

Linking  API 는 아래를 참고하시고, 방법은 매우 간단합니다.

api 를 이용하여, open 가능한 지 check 한 후, open 하면 됩니다.

사실, 바로 Linking.openURL 을 바로 불러줘도 잘 동작은 합니다만,

stable code를 위해 다음과 같이 구현하는 편이 좋습니다.

const supported = await Linking.canOpenURL(url);
if (supported) {
	// Opening the link with some app, if the URL scheme is "http" the web link should be opened
	// by some browser in the mobile
	await Linking.openURL(url);
} else {
	Alert.alert(`Don't know how to open this URL: ${url}`);
}

reactnative.dev/docs/linking

Linking · React Native

아래는 제 project 에 적용한 코드입니다.

import React, {useState, useEffect} from 'react';
import {Text, View, ScrollView, SafeAreaView, TouchableOpacity, Linking, Share} from 'react-native';

import {GoogleSignin} from '@react-native-community/google-signin';
import auth from "@react-native-firebase/auth";

import AsyncStorage from '@react-native-community/async-storage';
import DialogInput from 'react-native-dialog-input';

import Toast from 'react-native-toast-message';
import {showToast} from '../commonProperty/showToast';

const mMaxLength = 9;
const mMinLength = 3;
const duration = 3 * 1000;
const appStore = 'https://apps.apple.com/kr/app/%EC%9A%B0%EB%8F%99%ED%94%BC%ED%94%8C/id1545377342';
const playStore = 'https://play.google.com/store/apps/details?id=com.udonpeople';

export default function SettingScreen({navigation}) {

  useEffect(() => {
  })

  const onMoveStore = async () => {
    const url = Platform.OS === 'ios' ? appStore : playStore;
    const supportURL = await Linking.canOpenURL(url);
    if (supportURL) {
      await Linking.openURL(url);
    } else {
      showToast('죄송합니다 연결할 수 없습니다.', '불편 신고 부탁드립니다', duration, 'top');
    }
  }
  const onShare = async () => {
    try {
      const result = await Share.share({
        message: Platform.OS === 'ios' ? appStore : playStore,
      });
      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
      }
    } catch (error) {
      showToast('죄송합니다 공유할 수 없습니다', '불편 신고 부탁드립니다', duration, 'top');
    }
  }

  return (
    <SafeAreaView>
      <ScrollView style={globalStyles.chooserContainer} >
        {......}
        <View style={globalStyles.settingTitleText}>
          <Text style={globalStyles.settingTextLeft}>문의 하기 </Text>
        </View>
        <View style={globalStyles.settingDivider} />
        <TouchableOpacity style={globalStyles.settingRowContainer}
          onPress={onMoveStore}>
          <Text style={globalStyles.settingTextLeft}>별점 주기</Text>
        </TouchableOpacity>
        {......}
        <View style={globalStyles.settingDivider} />
        <TouchableOpacity style={globalStyles.settingRowContainer}
          onPress={onShare}>
          <Text style={globalStyles.settingTextLeft}>앱 공유 하기</Text>
        </TouchableOpacity>
        <View style={globalStyles.settingDivider} />            
        <View style={globalStyles.settingRowContainer}>
          <Text style={globalStyles.settingTextLeft}>개발자문의</Text>
          <Text style={globalStyles.settingTextRight}>ompangchu@gmail.com</Text>
        </View>
        <View style={globalStyles.settingDivider} />
        <TouchableOpacity style={globalStyles.settingRowContainer}
          onPress={deleteUser}>
          <Text style={globalStyles.settingTextLeft}>탈퇴 하기</Text>
        </TouchableOpacity>
        <View style={globalStyles.settingDivider} />
        
        <DialogInput isDialogVisible={dialogVisible}
          dialogStyle={{marginBottom: Platform.OS === 'android' ? 0:100}}
          title={"닉네임입력"} hintInput ={"별명"}
          placeholderTextColor={hintTextColor}
          cancelText={"취소"} submitText={"확인"}
          submitInput={ (inputText) => {sendInput(inputText)} }
          closeDialog={closeDialog}>
        </DialogInput>
        <Toast ref={(ref) => Toast.setRef(ref)} />
      </ScrollView>
    </SafeAreaView>
  );
}

github 에 react-native-rate 라는 FRW 을 이용하면

별점 주기 팝업을 강제로 띄우고

유저에게 별점을 유도할 수 있습니다.

강제 UX는 지양하고 있어서 따로 활용하진 않았습니다 :)