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

Source: Internet
Author: User




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




Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.