在图像选择器上将类组件转换为功能组件

Question

有人能帮我使用ReactNative expo将其转换为React Native Hooks吗。我已经试了好几个小时了，但我总是出错：NSMutableDictionary类型的JSON值无法转换为有效的URL我无法解决该错误，因此我认为这与componentDidMount和错误使用useEffect有关。提前谢谢你，

import { StyleSheet, Image, View } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';
import { EvilIcons } from '@expo/vector-icons';

export default class ImagePickerIcon extends React.Component {
state = {
image: null,
};
componentDidMount() {
this.getPermissionAsync()
}

getPermissionAsync = async () => {
if (Constants.platform.ios) {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
}
_pickImage = async () => {
try {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 4],
quality: 1,
});
if (!result.cancelled) {
this.setState({ image: result.uri })   
}
} catch (E) {
console.log(E);
}
}
render() {
let { image } = this.state;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View style={styles.emptyProfile}>
{image && <Image source={{ uri: this.state.image }} style={styles.profile} />}
<View style={{ left: 140, position: 'absolute', bottom: 50 }} >
<View style={styles.camera}>
<EvilIcons name='camera' size={35} color='#fff' onPress={this._pickImage} />
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
camera: {
backgroundColor: '#ec2327',
height: 50,
width: 50,
borderRadius: 25,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
},
profile: {
width: 190,
height: 190,
borderRadius: 100,
justifyContent: 'center',
alignItems: 'center',
},
emptyProfile: {
width: 200,
height: 200,
borderRadius: 100,
backgroundColor: '#c1b78d',
borderWidth: 5,
borderColor: '#fff',
shadowColor: 'black',
shadowOffset: { width: 0, height: 3 },
shadowRadius: 3,
shadowOpacity: 0.3,
elevation: 5,
}
})

Answer 1

export default function ImagePicker() {
const [image, setImage] = useState(null)
useEffect(() => {
getPermissionAsync()
}, [])
const getPermissionAsync = async () => {
if (Constants.platform.ios) {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
};
const pickImage = async () => {
try {
let result = await ImagePick.launchImageLibraryAsync({
mediaTypes: ImagePick.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 4],
quality: 1,
});
if (!result.cancelled) {
console.log({ image: result.uri })
setImage(result.uri)
uploadImage(result.uri, auth.currentUser.uid)
.then(() => {
console.log('success')
})
}
} catch (E) {
console.log(E);
}
};
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View style={styles.emptyProfile}>
{image && <Image style={styles.profile} source={{ uri: image }} />}
<View style={{ left: 140, position: 'absolute', bottom: 50 }} >
<TouchableOpacity style={styles.camera} onPress={pickImage}>
<EvilIcons name='camera' size={35} color='#fff' />
</TouchableOpacity>
</View>
</View>
</View>
)
}
const styles = StyleSheet.create({
camera: {
backgroundColor: '#ec2327',
height: 50,
width: 50,
borderRadius: 25,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
},
profile: {
width: 190,
height: 190,
borderRadius: 100,
justifyContent: 'center',
alignItems: 'center',
},
emptyProfile: {
width: 200,
height: 200,
borderRadius: 100,
backgroundColor: '#c1b78d',
borderWidth: 5,
borderColor: '#fff',
shadowColor: 'black',
shadowOffset: { width: 0, height: 3 },
shadowRadius: 3,
shadowOpacity: 0.3,
elevation: 5,
}
})