React Native Learning-camera pickup third-party components: React-native-image-picker

The recent software in the image processing is the focus, then the natural use of camera photography or photo album to choose the function of photos.

React-native has image-picker this third-party component, but 0.18.10 this version is not too supportive of the ipad.

This component supports both photo and video, that is, both photos and videos can be implemented with this component.

Installing NPM Install--save React-native-image-picker

To execute the RNPM link command after installation

Usage

import ImagePickerManager from ‘NativeModules‘;

When you want to show the camera or album selector: (variable options has other settings, some of which can meet our requirements by using its default values. Here is what I used)

var options = {

Title: 'select Avatar', / / the title of the selector. You can set it to blank to not display the title

cancelButtonTitle: ‘Cancel‘,

Takephotobuttontitle: 'take photo...', / / call the camera's button, which can be set to null, so that the user can't choose to take photos

Choosefromlibrarybuttontitle: 'choose from library...', / / the button to call the album. It can be set to null so that the user cannot select the album photo

customButtons: {

'choose photo from Facebook': 'FB', / / [button text]: [string returned when this button is selected]

}

mediaType: ‘photo‘, // ‘photo‘ or ‘video‘

videoQuality: ‘high‘, // ‘low‘, ‘medium‘, or ‘high‘

durationLimit: 10, // video recording max time in seconds

Maxwidth: 100, / / photos only is the width of the mobile screen by default. The height is the same as the width. It is a square photo

maxHeight: 100, // photos only

Allowsediting: false, / / allow users to edit pictures again after selecting them

}

ImagePickerManager.showImagePicker(options, (response) => {

console.log(‘Response = ‘, response);

if (response.didCancel) {

console.log(‘User cancelled image picker‘);

}

else if (response.error) {

console.log(‘ImagePickerManager Error: ‘, response.error);

}

else if (response.customButton) {

//This is only executed when the user selects the button customized by custombuttons

console.log(‘User tapped custom button: ‘, response.customButton);

}

Else {

// You can display the image using either data:

if (Platform.OS === ‘android‘) {

source = {uri: response.uri, isStatic: true};

} else {

Source = {

uri: response.uri.replace(‘file://‘, ‘‘),

isStatic: true

}

}

this.setState({

avatarSource: source

};

}

};

How to display pictures:

<Image source={this.state.avatarSource} style={styles.uploadAvatar} />

Of course, when we don't want users to choose, we call the camera or album directly. There are other functions in this component:

// Launch Camera:

ImagePickerManager.ImagePickerManager.launchCamera(options, (response)  => {

// Same code as in above section!

};

// Open Image Library:

ImagePickerManager.ImagePickerManager.launchImageLibrary(options, (response)  => {

// Same code as in above section!

};

More details can be viewed on its official website: https://github.com/marcshilling/react-native-image-picker

This component only supports the selection of a picture from the album, if not meet the needs, you can first learn about the official version of React-native Demo: Inside there are cameraroll can support from the album to get more than one picture.

React Native Learning-camera pickup third-party components: React-native-image-picker