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