출처 : https://coding-dahee.tistory.com/210
react-native: 0.61.5
react-native-view-shot: 3.1.2
react-native-share: 3.7.0
@react-native-community/cameraroll: 4.0.0
=> 오토링크!
=> 오토링크!
3) @react-native-community/cameraroll
=> 오토링크!
(https://coding-dahee.tistory.com/147 이곳에서 cameraroll 설치 방법 자세히 보기!)
https://coding-dahee.tistory.com/147
일단 캡쳐하고 싶은 부분을 ViewShot으로 감싸준다.
그리고 어떠한 버튼을 눌러서 캡쳐를 할 것이므로 아래와 같이 코드를 작성해준다.
import React, { useRef } from 'react';
import { SafeAreaView, Button, PermissionsAndroid, Platform } from 'react-native';
import ViewShot from 'react-native-view-shot';
import Share from 'react-native-share';
import CameraRoll from '@react-native-community/cameraroll';
import { ShareBox } from './styled';
export default () => {
const captureRef = useRef();
const getPhotoUri = async (): Promise<string> => {
const uri = await captureRef.current.capture();
console.log('👂👂 Image saved to', uri);
return uri;
};
const onCapture = async (social: Share.Social) => {
try {
const uri = await getPhotoUri();
const options = {
title: 'Share Title',
message: 'Share Message',
url: uri,
type: 'image/jpeg',
};
if (social === null) {
const result = await Share.open(options);
console.log('😻😻 result with no social', result);
} else {
const result = await Share.shareSingle({
...options,
social,
});
console.log(`😻😻 result with social ${social}`, result);
}
} catch (e) {
console.log('😻😻😻 snapshot failed', e);
}
};
const hasAndroidPermission = async () => {
const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;
const hasPermission = await PermissionsAndroid.check(permission);
if (hasPermission) {
return true;
}
const status = await PermissionsAndroid.request(permission);
return status === 'granted';
};
const onSave = async () => {
if (Platform.OS === 'android' && !(await hasAndroidPermission())) {
toast('갤러리 접근 권한이 없어요');
return;
}
const uri = await getPhotoUri();
const result = await CameraRoll.save(uri);
console.log('🐤result', result);
};
return (
<SafeAreaView>
<ViewShot ref={captureRef} options={{ format: 'jpg', quality: 0.9 }}>
<ShareBox>
<SSubColorText>이 박스가 캡쳐됩니다</SSubColorText>
</ShareBox>
</ViewShot>
<Button title="공유" onPress={() => onCapture(null)} />
<Button title="인스타 공유" onPress={() => onCapture(Share.Social.INSTAGRAM)} />
<Button title="갤러리에 저장" onPress={onSave} />
</SafeAreaView>
);
};