import * as ImagePicker from 'expo-image-picker';
import * as Permissions from 'expo-permissions';
// Импортирование фоторедактора rn для редактирования изображений
import { RNPhotoEditor } from 'react-native-photo-editor'
// варианты выбора изображений
const options = {
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
}
// использование эффекта для получения разрешения
useEffect(() => {
this.getPermissionAsync()
}, [this.getPermissionAsync])
// Сохранение изображения в состоянии
const [ image, setImage ] = useState(null);
// Получение разрешения
getPermissionAsync = async () => {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
// методы выбора и редактирования изображения
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync(options)
console.log(result);
if(result) {
setImage(result.uri);
}
}
const editImage = async() => {
console.log(image.replace('file://', ''))
RNPhotoEditor.Edit({
path:RNFS.DocumentDirectoryPath + image,
hiddenControls: ["save"],
onDone: (res) => {
console.log('on done');
self.setState({isRefresh: !this.state.isRefresh, imageHash: Date.now(), state: self.state});
},
onCancel: (res) => {
console.log('on cancel');
Alert.alert('', 'Edit Cancelled !')
}
});
}
// Реагируем на родной вид, выбирая и редактируя изображение отсюда
<TouchableOpacity>
<Text style={{marginVertical: 20}} onPress={() => pickImage()}>Gallery</Text>
<Text style={{marginVertical: 20}}>Camera</Text>
<Text style={{marginVertical: 25}} onPress={() => editImage()}>Edit Image</Text>
</TouchableOpacity>