我在注册屏幕上收到以下错误：
TypeError: undefined is not a function (near '..._reactNativeImagePicker.default.launchCamera...')
- node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
- node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
- node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
- node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
- node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
- node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
- node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
- node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
- node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
- node_modules\regenerator-runtime\runtime.js:293:29 in invoke
- node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
- node_modules\regenerator-runtime\runtime.js:154:27 in invoke
- node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
- node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
- node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue
我的代码有什么问题？
我的代码片段：
import { StatusBar } from "expo-status-bar";
import React, { useState, createRef, Component } from "react";
//import * as ImagePicker from 'react-native-image-picker';
import {
StyleSheet,
Text,
View,
Image,
TextInput,
Button,
TouchableOpacity,
KeyboardAvoidingView,
} from "react-native";
import {MaterialIcons} from '@expo/vector-icons';
import {MaterialCommunityIcons} from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import { FontAwesome } from '@expo/vector-icons';
import { ScrollView } from "react-native";
import Camera from 'react-native-camera';
import ImagePicker from 'react-native-image-picker';
const options = {
storageOptions: {
skipBackup: true,
path: 'images',
},
};
class RegistrationPage extends Component {
constructor(props) {
super(props);
this.state = {
firstname: "",
lastname: "",
phonenumber: "",
email: "",
show: "false",
visible: "true",
isRegistrationSucces: "false",
loading: "false",
errortext:"",
filepath: {
data: '',
uri: ''
},
fileData: '',
fileUri: '',
setErrortext: '',
};
}
handleSubmitButton = () => {
setErrortext('');
if (!firstname) {
alert('Please fill First Name');
return;
}
if (!lastname) {
alert('Please fill Last Name');
return;
}
if (!email) {
alert('Please fill Email');
return;
}
if (!password) {
alert('Please fill Password');
return;
}
if (!confirmpassword) {
alert('Please fill Confirm Password');
return;
}
}
launchCamera = () => {
let options = {
storageOptions: {
skipBackup: true,
path: 'images',
},
};
ImagePicker.launchCamera(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
alert(response.customButton);
} else {
const source = { uri: response.uri };
console.log('response', JSON.stringify(response));
this.setState({
filePath: response,
fileData: response.data,
fileUri: response.uri
});
}
});
}
renderFileData() {
if (this.state.fileData) {
return <Image source={{ uri: 'data:image/jpeg;base64,' + this.state.fileData }}
style={styles.images}
/>
} else {
return <Image source={require("../assets/screens/plane.png")}
style={styles.images}
/>
}
}
renderFileUri() {
if (this.state.fileUri) {
return <Image
source={{ uri: this.state.fileUri }}
style={styles.images}
/>
} else {
return <Image
source={require("../assets/screens/plane.png")}
style={styles.images}
/>
}
}
launchImageLibrary = () => {
let options = {
storageOptions: {
skipBackup: true,
path: 'images',
},
};
ImagePicker.launchCamera(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
alert(response.customButton);
} else {
const source = { uri: response.uri };
console.log('response', JSON.stringify(response));
this.setState({
filePath: response,
fileData: response.data,
fileUri: response.uri
});
}
});
}
render() {
//const [firstname, setFirstName] = useState("");
return (
<KeyboardAvoidingView style={styles.background} keyboardVerticalOffset={-50} behavior={Platform.OS === "ios" ? "padding" : "height"} >
<Image style={styles.top} source={require("../assets/screens/top.png")} />
<Image style={styles.plane} source={require("../assets/screens/plane.png")} />
<Image style={styles.building} source={require("../assets/screens/building.png")} />
<View style={styles.rectangle}>
<TouchableOpacity onPress={this.launchImageLibrary} style={styles.btnSection} >
<MaterialCommunityIcons
name={'camera'}
size={40}
color={'white'}
style={{flexDirection:"row", alignSelf:"center"}}
/>
</TouchableOpacity>
<View style={styles.container}>
<ScrollView>
<View style={styles.inputView}>
<FontAwesome name="user" size={15} color="gray" />
<TextInput
style={styles.TextInput}
placeholder="First Name"
secureTextEntry={false}
onChangeText={(text) => this.setState({firstname: text})}
value={this.state.firstname}
/>
</View>
<View style={styles.inputView}>
<FontAwesome name="user" size={15} color="gray" />
<TextInput
style={styles.TextInput}
placeholder="Last Name"
secureTextEntry={false}
onChangeText={(text) => this.setState({lastname: text})}
value={this.state.lastname}
/>
</View>
<View style={styles.inputView}>
<MaterialCommunityIcons
name={'email'}
size={15}
color={'gray'}
/>
<TextInput
style={styles.TextInput}
placeholder="Email Address"
secureTextEntry={false}
onChangeText={(text) => this.setState({email: text})}
/>
</View>
<View style={styles.inputView}>
<MaterialCommunityIcons
name={'lock'}
size={15}
color={'gray'}
/>
<TextInput
style={styles.TextInput}
placeholder="Password"
secureTextEntry={this.visible}
onChangeText={(text) => this.setState({password: text})}
/>
<TouchableOpacity style={styles.btneye} onPress={
()=>{
setVisible(!this.visible),
setShow(!this.show)
}
}>
<MaterialCommunityIcons
name={this.show === false ? 'eye-outline' : 'eye-off-outline'}
size={15}
color={'gray'}
/>
</TouchableOpacity>
</View>
<View style={styles.inputView}>
<MaterialCommunityIcons
name={'lock'}
size={15}
color={'gray'}
/>
<TextInput
style={styles.TextInput}
placeholder="Re-Enter Password"
secureTextEntry={this.visible}
onChangeText={(text) => this.setState({password: text})}
/>
<TouchableOpacity style={styles.btneye} onPress={
()=>{
setVisible(!this.visible),
setShow(!this.show)
}
}>
<MaterialCommunityIcons
name={this.show === false ? 'eye-outline' : 'eye-off-outline'}
size={15}
color={'gray'}
/>
</TouchableOpacity>
</View>
<TouchableOpacity style={styles.signupBtn} activeOpacity={0.5} onPress={this.handleSubmitButton}>
<Text style={styles.loginText}>Sign Up</Text>
</TouchableOpacity>
</ScrollView>
</View>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
image:{
marginBottom: 40,
},
container:{
flex: 1,
},
containerAvoidingView:{
flex: 1,
alignItems: "center",
padding: 10,
},
inputView: {
flexDirection: "row",
paddingHorizontal: 12,
borderRadius: 10,
backgroundColor: "white",
alignItems: "center",
borderWidth: 0.5,
justifyContent: "space-between",
shadowColor: '#D3D3D3',
borderColor: '#D3D3D3',
shadowOffset: {
width: 0,
height: 3
},
shadowRadius: 2,
shadowOpacity: 5.0,
marginBottom: 10,
marginTop: 10,
},
TextInput: {
height: 50,
flex: 1,
padding: 10,
marginLeft: 20,
flexDirection: "row",
},
welcomemessage: {
fontSize: 20,
fontFamily: "SFUIDisplay-Bold",
marginBottom: 20,
textAlign: "center",
margin: 10,
},
phoneInputStyle: {
left: 5,
flex: 1,
height: 50,
},
signupBtn: {
width: "80%",
borderRadius: 10,
height: 50,
alignItems: "center",
alignSelf: "center",
justifyContent: "center",
marginTop: 10,
marginBottom: 10,
backgroundColor: "#FFB649",
shadowColor: '#D3D3D3',
borderColor: '#D3D3D3',
shadowOffset: {
width: 0,
height: 3
},
shadowRadius: 2,
shadowOpacity: 5.0,
flexDirection: "row",
},
background: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#8329FD",
alignItems: "center",
justifyContent: "center",
},
top: {
width: 519,
height: 185.72,
top: 0,
left: -112,
right: 0,
bottom: 0,
position: "absolute",
},
plane: {
width: 349,
height: 133.59,
position: "absolute",
top: 60,
left: -1,
right: 0,
bottom: 0,
},
rectangle: {
width: "100%",
height: "75%",
position: "relative",
marginTop: 100,
borderRadius: 40,
backgroundColor: "#fff",
alignSelf: "center",
padding: 10,
},
openDialogView: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center"
},
building: {
width: "100%",
height: "40%",
position: "absolute",
// alignSelf: "stretch",
bottom: 0,
},
btneye:{
position: "absolute",
right: 25,
},
btnSection: {
width: 80,
height: 80,
backgroundColor: '#8329FD',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 40,
marginBottom:10,
borderColor: "#FFB649", borderWidth: 2, alignSelf: "center", marginTop: -50,
},
});
export default RegistrationPage;