react-native-image-picker
是一个用于在 React Native 应用中选择图片和打开摄像头的库
react-native-image-picker
:npm install react-native-image-picker
cd ios && pod install && cd ..
AndroidManifest.xml
文件中添加必要权限:<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
Info.plist
文件中添加必要权限:<key>NSCameraUsageDescription</key>
<string>这个应用需要访问您的摄像头</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>这个应用需要访问您的相册</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>这个应用需要访问您的相册</string>
ImagePicker.launchCamera
方法:import React, {useState} from 'react';
import {View, Button, Image} from 'react-native';
import ImagePicker from 'react-native-image-picker';
const App = () => {
const [imageUri, setImageUri] = useState(null);
const launchCamera = () => {
const options = {
mediaType: 'photo',
includeBase64: false,
maxHeight: 2000,
maxWidth: 2000,
};
ImagePicker.launchCamera(options, (response) => {
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else {
setImageUri(response.uri);
}
});
};
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Button title="Open Camera" onPress={launchCamera} />
{imageUri && <Image source={{uri: imageUri}} style={{width: 200, height: 200}} />}
</View>
);
};
export default App;
注意:在 iOS 设备上,您需要在真实设备上运行应用,而不是在模拟器上运行,因为模拟器不支持摄像头。
领取专属 10元无门槛券
手把手带您无忧上云