我正在尝试使用react-native-image-crop-picker。代码如下。我已经尝试过做npm install react-native-image-crop-picker@latest。
每当我选择任何一个选项undefined不是一个对象(评估'imagePicker. openPicker')显示.请帮助解决这个问题.
import React, {Component} from 'react';
import {
View, Text, StyleSheet, ScrollView, Alert,
Image, TouchableOpacity, NativeModules, Dimensions
} from 'react-native';
var ImagePicker = NativeModules.ImageCropPicker;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
button: {
backgroundColor: 'blue',
marginBottom: 10
},
text: {
color: 'white',
fontSize: 20,
textAlign: 'center'
}
});
export default class Upload extends Component {
constructor() {
super();
this.state = {
image: null,
images: null
};
}
pickSingleWithCamera(cropping) {
ImagePicker.openCamera({
cropping: cropping,
width: 500,
height: 500,
}).then(image => {
console.log('received image', image);
this.setState({
image: {uri: image.path, width: image.width, height: image.height},
images: null
});
}).catch(e => alert(e));
}
pickSingleBase64(cropit) {
ImagePicker.openPicker({
width: 300,
height: 300,
cropping: cropit,
includeBase64: true
}).then(image => {
console.log('received base64 image');
this.setState({
image: {uri: `data:${image.mime};base64,`+ image.data, width: image.width, height: image.height},
images: null
});
}).catch(e => alert(e));
}
cleanupImages() {
ImagePicker.clean().then(() => {
console.log('removed tmp images from tmp directory');
}).catch(e => {
alert(e);
});
}
cleanupSingleImage() {
let image = this.state.image || (this.state.images && this.state.images.length ? this.state.images[0] : null);
console.log('will cleanup image', image);
ImagePicker.cleanSingle(image ? image.uri : null).then(() => {
console.log(`removed tmp image ${image.uri} from tmp directory`);
}).catch(e => {
alert(e);
})
}
cropLast() {
if (!this.state.image) {
return Alert.alert('No image', 'Before open cropping only, please select image');
}
openCropper({
path: this.state.image.uri,
width: 200,
height: 200
}).then(image => {
console.log('received cropped image', image);
this.setState({
image: {uri: image.path, width: image.width, height: image.height, mime: image.mime},
images: null
});
}).catch(e => {
console.log(e);
Alert.alert(e.message ? e.message : e);
});
}
pickSingle(cropit, circular=false) {
ImagePicker.openPicker({
width: 300,
height: 300,
cropping: cropit,
cropperCircleOverlay: circular,
compressImageMaxWidth: 640,
compressImageMaxHeight: 480,
compressImageQuality: 0.5,
compressVideoPreset: 'MediumQuality',
}).then(image => {
console.log('received image', image);
this.setState({
image: {uri: image.path, width: image.width, height: image.height, mime: image.mime},
images: null
});
}).catch(e => {
console.log(e);
Alert.alert(e.message ? e.message : e);
});
}
pickMultiple() {
ImagePicker.openPicker({
multiple: true,
waitAnimationEnd: false
}).then(images => {
this.setState({
image: null,
images: images.map(i => {
console.log('received image', i);
return {uri: i.path, width: i.width, height: i.height, mime: i.mime};
})
});
}).catch(e => alert(e));
}
scaledHeight(oldW, oldH, newW) {
return (oldH / oldW) * newW;
}
renderVideo(video) {
return (<View style={{height: 300, width: 300}}>
<Video source={{uri: video.uri, type: video.mime}}
style={{position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0
}}
rate={1}
paused={false}
volume={1}
muted={false}
resizeMode={'cover'}
onError={e => console.log(e)}
onLoad={load => console.log(load)}
repeat={true} />
</View>);
}
renderImage(image) {
return <Image style={{width: 300, height: 300, resizeMode: 'contain'}} source={image} />
}
renderAsset(image) {
if (image.mime && image.mime.toLowerCase().indexOf('video/') !== -1) {
return this.renderVideo(image);
}
return this.renderImage(image);
}
render() {
return (<View style={styles.container}>
<ScrollView>
{this.state.image ? this.renderAsset(this.state.image) : null}
{this.state.images ? this.state.images.map(i => <View key={i.uri}>{this.renderAsset(i)}</View>) : null}
</ScrollView>
<TouchableOpacity onPress={() => this.pickSingleWithCamera(false)} style={styles.button}>
<Text style={styles.text}>Select Single With Camera</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.pickSingleWithCamera(true)} style={styles.button}>
<Text style={styles.text}>Select Single With Camera With Cropping</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.pickSingle(false)} style={styles.button}>
<Text style={styles.text}>Select Single</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.cropLast()} style={styles.button}>
<Text style={styles.text}>Crop Last Selected Image</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.pickSingleBase64(false)} style={styles.button}>
<Text style={styles.text}>Select Single Returning Base64</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.pickSingle(true)} style={styles.button}>
<Text style={styles.text}>Select Single With Cropping</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.pickSingle(true, true)} style={styles.button}>
<Text style={styles.text}>Select Single With Circular Cropping</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.pickMultiple.bind(this)} style={styles.button}>
<Text style={styles.text}>Select Multiple</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.cleanupImages.bind(this)} style={styles.button}>
<Text style={styles.text}>Cleanup All Images</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.cleanupSingleImage.bind(this)} style={styles.button}>
<Text style={styles.text}>Cleanup Single Image</Text>
</TouchableOpacity>
</View>
);
}
}
4条答案
按热度按时间u4vypkhs1#
**重要!!!!!!!!!!!**经过数小时的调试。对于使用Expo的每个人。在尝试在Windows中构建时,这在Expo中不起作用。请尝试使用此表单。https://docs.expo.dev/versions/latest/sdk/imagepicker/
pkbketx92#
我通过在node_modules中添加一个文件夹
react-native-image-crop-picker
并运行cd ios
pod install
来解决这个问题ukqbszuj3#
我还发现在你的大多数函数中,你引用了this.setState(),但你实际上并没有将你的函数绑定到你的构造函数中的组件。
尝试在构造函数中添加以下行:
如果你想传递一个参数,可以通过以下方式从你的组件调用这个函数:
这只是你的一个功能,你需要为其他人这样做。这可能只是工作,我不是100%肯定。
enyaitl34#
你是否已经导入了头文件中的模块?在代码的顶部尝试以下操作: