Expo - iOS上的ImagePicker方面无法正常工作。仅限方形

时间:2018-05-07 12:41:31

标签: react-native expo

imagePicker组件适用于iOS和Android。

宽高比完全适用于Android,但不能在iOS上运行。我正在使用create-react-native-app而且我不想弹出并使用另一个包。

我需要创建三个裁剪选项 - Landscape,Square和Portrait。现在我只能得到方形图像。

从相机拍摄照片时,我获得了宽度和高度的方形尺寸,但从图库中选择时获得了原始图像尺寸。

我正在使用示例代码。让我知道可以做些什么来解决这个问题或我可以用来实现这个而不弹出的另一个包。非常感谢。

import React, { Component } from 'react';
import { Button, Text, ScrollView, StyleSheet } from 'react-native';
import { ImagePicker, Permissions, Constants } from 'expo';

export default class App extends Component {
state = {
result: null,
};

askPermissionsAsync = async () => {
    await Permissions.askAsync(Permissions.CAMERA);
    await Permissions.askAsync(Permissions.CAMERA_ROLL);
    // you would probably do something to verify that permissions
    // are actually granted, but I'm skipping that for brevity
};

useLibraryHandler = async () => {
    await this.askPermissionsAsync();
    let result = await ImagePicker.launchImageLibraryAsync({
        allowsEditing: true,
        aspect: [12, 3],
        base64: false,
    });
    console.log(result.width, result.height, "result");
    this.setState({ result });
};

useCameraHandler = async () => {
    await this.askPermissionsAsync();
    let result = await ImagePicker.launchCameraAsync({
        allowsEditing: true,
        aspect: [12, 3],
        base64: false,
    });
    console.log(result.width, result.height, "result");
    this.setState({ result });
};

render() {
    return (
        <ScrollView style={{flex: 1}} contentContainerStyle={styles.container}>
            <Button title="launchCameraAsync" onPress={this.useCameraHandler} />
            <Button
                title="launchImageLibraryAsync"
                onPress={this.useLibraryHandler}
            />
            <Text style={styles.paragraph}>
                {JSON.stringify(this.state.result)}
            </Text>
        </ScrollView>
    );
}
}

1 个答案:

答案 0 :(得分:1)

您将在 IOS

中仅返回方形图片

正如世博会docs所述。

aspect(array) - 包含两个条目[x, y]的数组,指定在允许用户编辑图像时要维护的宽高比(通过传递allowsEditing: true) 。

  

这仅适用于 Android ,因为在 iOS 裁剪矩形始终是正方形。< / p>

因此,您需要使用react-native-image-resizer或任何其他替代软件包手动调整图像大小。