使用按钮触发 React Native 中的相机模块？

Question

I'm trying to figure out to trigger the camera module on iOS React Native app. I've been using a custom component to write the code for a button, and I would like that button to trigger the camera interface.

But I'm having a hard time to understand what is needed to accomplish this.

This is what I have so far:

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import TakePhoto from './TakePhoto';
import CameraRoll from './CameraRoll';

const PhotoOptions = () => {

    const handleCameraPress = () => {
        console.log("Trigger camera");
    }

    return(
        <View style={styles.container}>
            <Text style={styles.label}>Välj en passande bild (valfritt)</Text>
            <View style={styles.columns}>
                <TakePhoto onPress={handleCameraPress} />
                <CameraRoll />
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        borderWidth: 1,
        borderColor: 'red',
        marginBottom: 20,
        paddingBottom: 250
    },
    label: {
        marginBottom: 8
    },
    columns: {
        display: 'flex',
        flexDirection: 'row',
        // flex: 1
    }
});

export default PhotoOptions;

Answer 1

As I saw you are also trying to access to camera roll for picture and other stuff, You can use this lib for this.

https://github.com/react-native-community/react-native-cameraroll

Usage:

import CameraRoll from "@react-native-community/cameraroll";

CameraRoll.getAlbums(params);

CameraRoll.getPhotos(params);

_handleButtonPress = () => {
   CameraRoll.getPhotos({
       first: 20,
       assetType: 'Photos',
     })
     .then(r => {
       this.setState({ photos: r.edges });
     })
     .catch((err) => {
        //Error Loading Images
     });
   };
render() {
 return (
   <View>
     <Button title="Load Images" onPress={this._handleButtonPress} />
     <ScrollView>
       {this.state.photos.map((p, i) => {
       return (
         <Image
           key={i}
           style={{
             width: 300,
             height: 100,
           }}
           source={{ uri: p.node.image.uri }}
         />
       );
     })}
     </ScrollView>
   </View>
 );
}

If you wanted to trigger camera you can use this lib

https://github.com/react-native-community/react-native-camera

Usage can found here.

https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md

You also have an option to use this lib to pick some image from gallery or camera.

https://github.com/react-native-community/react-native-image-picker

Usage::

import ImagePicker from 'react-native-image-picker';

// More info on all the options is below in the API Reference... just some common use cases shown here
const options = {
  title: 'Select Avatar',
  customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

/**
 * The first arg is the options object for customization (it can also be null or omitted for default options),
 * The second arg is the callback which sends object: response (more info in the API Reference)
 */
ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled image picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  } else {
    const source = { uri: response.uri };

    // You can also display the image using data:
    // const source = { uri: 'data:image/jpeg;base64,' + response.data };

    this.setState({
      avatarSource: source,
    });
  }
});


// Launch Camera:
ImagePicker.launchCamera(options, (response) => {
  // Same code as in above section!
});

// Open Image Library:
ImagePicker.launchImageLibrary(options, (response) => {
  // Same code as in above section!
});

Answer 2

you can use react-native-image-picker to trigger camera

install react-native-image-picker by

yarn add react-native-image-picker

Example Code:

import ImagePicker from 'react-native-image-picker';

// More info on all the options is below in the API Reference... just some common use cases shown here
const options = {
  title: 'Select Avatar',
  customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

/**
 * The first arg is the options object for customization (it can also be null or omitted for default options),
 * The second arg is the callback which sends object: response (more info in the API Reference)
 */
ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled image picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  } else {
    const source = { uri: response.uri };

    // You can also display the image using data:
    // const source = { uri: 'data:image/jpeg;base64,' + response.data };

    this.setState({
      avatarSource: source,
    });
  }
});