style: use prettier
This commit is contained in:
parent
4ed8798020
commit
ca0de304b9
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"printWidth": 120
|
||||
}
|
|
@ -4,16 +4,7 @@
|
|||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
AppRegistry,
|
||||
CameraRoll,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
Image,
|
||||
Alert,
|
||||
TouchableOpacity
|
||||
} from 'react-native';
|
||||
import { AppRegistry, CameraRoll, StyleSheet, Text, View, Image, Alert, TouchableOpacity } from 'react-native';
|
||||
import Spinner from 'react-native-gifted-spinner';
|
||||
import ImageResizer from 'react-native-image-resizer';
|
||||
|
||||
|
@ -42,7 +33,7 @@ const styles = StyleSheet.create({
|
|||
color: '#333333',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 5,
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
export default class ResizerExample extends Component {
|
||||
|
@ -56,60 +47,53 @@ export default class ResizerExample extends Component {
|
|||
}
|
||||
|
||||
componentDidMount() {
|
||||
CameraRoll.getPhotos({first: 1}).then((photos) => {
|
||||
if (!photos.edges || photos.edges.length === 0) {
|
||||
return Alert.alert('Unable to load camera roll',
|
||||
'Check that you authorized the access to the camera roll photos and that there is at least one photo in it');
|
||||
}
|
||||
CameraRoll.getPhotos({ first: 1 })
|
||||
.then(photos => {
|
||||
if (!photos.edges || photos.edges.length === 0) {
|
||||
return Alert.alert(
|
||||
'Unable to load camera roll',
|
||||
'Check that you authorized the access to the camera roll photos and that there is at least one photo in it'
|
||||
);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
image: photos.edges[0].node.image,
|
||||
this.setState({
|
||||
image: photos.edges[0].node.image,
|
||||
});
|
||||
})
|
||||
}).catch(() => {
|
||||
return Alert.alert('Unable to load camera roll',
|
||||
'Check that you authorized the access to the camera roll photos');
|
||||
});
|
||||
.catch(() => {
|
||||
return Alert.alert(
|
||||
'Unable to load camera roll',
|
||||
'Check that you authorized the access to the camera roll photos'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
resize() {
|
||||
ImageResizer.createResizedImage(this.state.image.uri, 800, 600, 'JPEG', 80)
|
||||
.then(({uri}) => {
|
||||
this.setState({
|
||||
resizedImageUri: uri,
|
||||
ImageResizer.createResizedImage(this.state.image.uri, 8, 6, 'JPEG', 80)
|
||||
.then(({ uri }) => {
|
||||
this.setState({
|
||||
resizedImageUri: uri,
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
return Alert.alert('Unable to resize the photo', 'Check the console for full the error message');
|
||||
});
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
return Alert.alert('Unable to resize the photo',
|
||||
'Check the console for full the error message');
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.welcome}>
|
||||
Image Resizer example
|
||||
</Text>
|
||||
<Text style={styles.instructions}>
|
||||
This is the original image:
|
||||
</Text>
|
||||
{
|
||||
this.state.image ?
|
||||
<Image style={styles.image} source={{uri: this.state.image.uri}} /> :
|
||||
<Spinner />
|
||||
}
|
||||
<Text style={styles.instructions}>
|
||||
Resized image:
|
||||
</Text>
|
||||
<Text style={styles.welcome}>Image Resizer example</Text>
|
||||
<Text style={styles.instructions}>This is the original image:</Text>
|
||||
{this.state.image ? <Image style={styles.image} source={{ uri: this.state.image.uri }} /> : <Spinner />}
|
||||
<Text style={styles.instructions}>Resized image:</Text>
|
||||
<TouchableOpacity onPress={() => this.resize()}>
|
||||
<Text style={styles.resizeButton}>
|
||||
Click me to resize the image
|
||||
</Text>
|
||||
<Text style={styles.resizeButton}>Click me to resize the image</Text>
|
||||
</TouchableOpacity>
|
||||
{
|
||||
this.state.resizedImageUri ?
|
||||
<Image style={styles.image} source={{uri: this.state.resizedImageUri}} /> : null
|
||||
}
|
||||
{this.state.resizedImageUri ? (
|
||||
<Image style={styles.image} source={{ uri: this.state.resizedImageUri }} />
|
||||
) : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -5,9 +5,7 @@
|
|||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
AppRegistry,
|
||||
} from 'react-native';
|
||||
import { AppRegistry } from 'react-native';
|
||||
import ResizerExample from './app';
|
||||
|
||||
AppRegistry.registerComponent('ResizerExample', () => ResizerExample);
|
||||
|
|
|
@ -5,9 +5,7 @@
|
|||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
AppRegistry,
|
||||
} from 'react-native';
|
||||
import { AppRegistry } from 'react-native';
|
||||
import ResizerExample from './app';
|
||||
|
||||
AppRegistry.registerComponent('ResizerExample', () => ResizerExample);
|
||||
|
|
|
@ -5,8 +5,17 @@ const ImageResizerAndroid = React.NativeModules.ImageResizerAndroid;
|
|||
export default {
|
||||
createResizedImage: (imagePath, newWidth, newHeight, compressFormat, quality, rotation = 0, outputPath) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
ImageResizerAndroid.createResizedImage(imagePath, newWidth, newHeight,
|
||||
compressFormat, quality, rotation, outputPath, resolve, reject);
|
||||
ImageResizerAndroid.createResizedImage(
|
||||
imagePath,
|
||||
newWidth,
|
||||
newHeight,
|
||||
compressFormat,
|
||||
quality,
|
||||
rotation,
|
||||
outputPath,
|
||||
resolve,
|
||||
reject
|
||||
);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
|
|
@ -1,16 +1,20 @@
|
|||
declare module "react-native-image-resizer" {
|
||||
export interface Response {
|
||||
path: string;
|
||||
uri: string;
|
||||
size?: number;
|
||||
name?: string;
|
||||
}
|
||||
declare module 'react-native-image-resizer' {
|
||||
export interface Response {
|
||||
path: string;
|
||||
uri: string;
|
||||
size?: number;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export default class ImageResizer {
|
||||
static createResizedImage(
|
||||
uri: string, width: number, height: number,
|
||||
format: "PNG" | "JPEG" | "WEBP", quality: number,
|
||||
rotation?: number, outputPath?: string
|
||||
): Promise<Response>;
|
||||
}
|
||||
export default class ImageResizer {
|
||||
static createResizedImage(
|
||||
uri: string,
|
||||
width: number,
|
||||
height: number,
|
||||
format: 'PNG' | 'JPEG' | 'WEBP',
|
||||
quality: number,
|
||||
rotation?: number,
|
||||
outputPath?: string
|
||||
): Promise<Response>;
|
||||
}
|
||||
}
|
||||
|
|
25
index.ios.js
25
index.ios.js
|
@ -1,6 +1,4 @@
|
|||
import {
|
||||
NativeModules,
|
||||
} from 'react-native';
|
||||
import { NativeModules } from 'react-native';
|
||||
|
||||
export default {
|
||||
createResizedImage: (path, width, height, format, quality, rotation = 0, outputPath) => {
|
||||
|
@ -9,13 +7,22 @@ export default {
|
|||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
NativeModules.ImageResizer.createResizedImage(path, width, height, format, quality, rotation, outputPath, (err, response) => {
|
||||
if (err) {
|
||||
return reject(err);
|
||||
}
|
||||
NativeModules.ImageResizer.createResizedImage(
|
||||
path,
|
||||
width,
|
||||
height,
|
||||
format,
|
||||
quality,
|
||||
rotation,
|
||||
outputPath,
|
||||
(err, response) => {
|
||||
if (err) {
|
||||
return reject(err);
|
||||
}
|
||||
|
||||
resolve(response);
|
||||
});
|
||||
resolve(response);
|
||||
}
|
||||
);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
|
|
@ -1,21 +1,21 @@
|
|||
// @flow
|
||||
declare type ResizedImageInfo = {
|
||||
path: string,
|
||||
uri: string,
|
||||
size?: number,
|
||||
name?: string
|
||||
path: string,
|
||||
uri: string,
|
||||
size?: number,
|
||||
name?: string,
|
||||
};
|
||||
|
||||
declare function createResizedImage(
|
||||
uri: string,
|
||||
width: number,
|
||||
height: number,
|
||||
format: 'PNG' | 'JPEG' | 'WEBP',
|
||||
quality: number,
|
||||
rotation?: number,
|
||||
outputPath?: string
|
||||
uri: string,
|
||||
width: number,
|
||||
height: number,
|
||||
format: 'PNG' | 'JPEG' | 'WEBP',
|
||||
quality: number,
|
||||
rotation?: number,
|
||||
outputPath?: string
|
||||
): Promise<ResizedImageInfo>;
|
||||
|
||||
declare export default {
|
||||
createResizedImage: createResizedImage
|
||||
createResizedImage: createResizedImage,
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue