React Native 图片选择器组件for Android , 基于react-native-image-crop-picker
import React, { useState } from 'react';
import { View, Button, StyleSheet, Image, Platform } from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';
const ImagePickerComponent = () => {
const [selectedImage, setSelectedImage] = useState(null);
const pickImage = () => {
const options = {
mediaType: 'photo',
...Platform.select({
ios: {
allowsEditing: true,
},
}),
};
ImagePicker.openPicker(options)
.then((image) => {
const { path, uri, width, height } = image;
setSelectedImage({ path, uri, width, height });
})
.catch(e => console.log(e));
};
return (
<View style={styles.container}>
<Button title="选择图片" onPress={pickImage} />
{selectedImage && <Image source={{ uri: selectedImage.uri }} style={styles.image} />}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
image: {
width: 200,
height: 200,
marginTop: 20,
},
});
export default ImagePickerComponent;
这段代码展示了如何在React Native应用中使用react-native-image-crop-picker
库来实现一个简单的图片选择器组件。用户点击按钮后,会打开系统的图片库或相机,选择并裁剪图片,然后将选定的图片显示在界面上。
评论已关闭