Expo.launchCameraAsync自定义图像视图？

Question

I am creating camera feature for my app so that after the user takes the photo, they can rescale and move it around a bounding box. Expo have an out of box API that does what I want:

ImagePicker.launchCameraAsync({ allowsEditing: true, aspect: [4,3] })

but I would also like the camera screen itself to be full screen, so no black bars on top and bottom, I have the view here:

import { ImagePicker, Camera, Permissions, FileSystem } from 'expo';

    <View style={{ flex: 1 }}>
        <Camera 
            style = {{ flex: 1 }} 
            type  = {this.state.type}
            ref   = {ref => { this.camera = ref }} 
        >
            <View style={camera.container}>
                <TouchableOpacity 
                    style = {this.state.css.touchable}
                    onPress={this.onTap}
                />

                <Button transparent
                    onPress = {this.onSnapShot}
                    style   = {[camera.buttonContainer, this.state.css.button]}
                >
                    <Entypo 
                        name  = 'circle' 
                        size  = {fonts.camera} 
                        color = {colors.wineWhite}
                    />
                </Button>
            </View>
        </Camera>
    </View>

The detail isn't important, the point is that I can create a Camera view. Now the question is is there a way to pass in this camera view into launchCameraAsync ? The documentation does not seem to provide a solution.

Answer 1

I think this combinition is not possible.

ImagePicker.launchCameraAsync({ allowsEditing: true, aspect: [4,3] }) is calling a full capsuled expo component.

If you want to create a customized view, you have to handle all states and video/photo actions by you're own.

Answer 2

Try launching an ImageManipulator after the picture is taken. After calling takePictureAsync, wait for the promise to resolve, then you'll get the local uri of the image, being able to pass that to the ImageManipulator.