问题描述
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,};
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,};
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,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",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,marginLeft: 20,flexDirection: "row",welcomemessage: {
fontSize: 20,fontFamily: "SFUIdisplay-Bold",marginBottom: 20,textAlign: "center",margin: 10,phoneInputStyle: {
left: 5,height: 50,signupBtn: {
width: "80%",alignSelf: "center",justifyContent: "center",backgroundColor: "#FFB649",background: {
flex: 1,backgroundColor: "#8329FD",top: {
width: 519,height: 185.72,top: 0,left: -112,right: 0,bottom: 0,position: "absolute",plane: {
width: 349,height: 133.59,top: 60,left: -1,rectangle: {
width: "100%",height: "75%",position: "relative",marginTop: 100,borderRadius: 40,backgroundColor: "#fff",openDialogView: {
flexDirection: "row",justifyContent: "center"
},building: {
width: "100%",height: "40%",// alignSelf: "stretch",btneye:{
position: "absolute",right: 25,btnSection: {
width: 80,height: 80,backgroundColor: '#8329FD',alignItems: 'center',justifyContent: 'center',marginBottom:10,borderColor: "#FFB649",borderWidth: 2,marginTop: -50,});
export default RegistrationPage;解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）