react native(ios)使用react-native-image-crop-picker
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';
export default function App() {
const [image, setImage] = useState(null);
const pickImage = () => {
ImagePicker.openPicker({
width: 300,
height: 400,
includeBase64: true,
mediaType: 'photo',
}).then(image => {
setImage(image);
});
};
return (
<View style={styles.container}>
<Button title="Pick an image" onPress={pickImage} />
{image ? <Image source={{ uri: image.path }} style={styles.image} /> : null}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
image: {
width: 300,
height: 400,
resizeMode: 'contain',
},
});
这段代码展示了如何在React Native应用中使用react-native-image-crop-picker
库来选择和显示图片。它定义了一个简单的函数pickImage
,该函数调用图片选择器,并在用户选择图片后,使用状态image
来更新组件的渲染。代码中还包含了样式定义和按钮组件,以便用户可以触发图片选择。
评论已关闭