使用图片选择器

// ...rest of the import statements remain unchanged
import * as ImagePicker from 'expo-image-picker';

export default function Index() {
const pickImageAsync = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ['images'],
    allowsEditing: true,
    quality: 1,
  });

  if (!result.canceled) {
    console.log(result);
  } else {
    alert('You did not select any image.');
  }
};

// ...rest of the code remains same
}

import { StyleSheet, View, Pressable, Text } from 'react-native';
import FontAwesome from '@expo/vector-icons/FontAwesome';

type Props = {
label: string;
theme?: 'primary';
onPress?: () => void;
};

export default function Button({ label, theme, onPress }: Props) {
if (theme === 'primary') {
  return (
    <View
      style={[
        styles.buttonContainer,
        { borderWidth: 4, borderColor: '#ffd33d', borderRadius: 18 },
      ]}>
      <Pressable style={[styles.button, { backgroundColor: '#fff' }]} onPress={onPress}>
        <FontAwesome name="picture-o" size={18} color="#25292e" style={styles.buttonIcon} />
        <Text style={[styles.buttonLabel, { color: '#25292e' }]}>{label}</Text>
      </Pressable>
    </View>
  );
}

return (
  <View style={styles.buttonContainer}>
    <Pressable style={styles.button} onPress={() => alert('You pressed a button.')}>
      <Text style={styles.buttonLabel}>{label}</Text>
    </Pressable>
  </View>
);
}

const styles = StyleSheet.create({
buttonContainer: {
  width: 320,
  height: 68,
  marginHorizontal: 20,
  alignItems: 'center',
  justifyContent: 'center',
  padding: 3,
},
button: {
  borderRadius: 10,
  width: '100%',
  height: '100%',
  alignItems: 'center',
  justifyContent: 'center',
  flexDirection: 'row',
},
buttonIcon: {
  paddingRight: 8,
},
buttonLabel: {
  color: '#fff',
  fontSize: 16,
},
});

import { View, StyleSheet } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

import Button from '@/components/Button';
import ImageViewer from '@/components/ImageViewer';

const PlaceholderImage = require('@/assets/images/background-image.png');

export default function Index() {
const pickImageAsync = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ['images'],
    allowsEditing: true,
    quality: 1,
  });

  if (!result.canceled) {
    console.log(result);
  } else {
    alert('You did not select any image.');
  }
};

return (
  <View style={styles.container}>
    <View style={styles.imageContainer}>
      <ImageViewer imgSource={PlaceholderImage} />
    </View>
    <View style={styles.footerContainer}>
      <Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />
      <Button label="Use this photo" />
    </View>
  </View>
);
}

const styles = StyleSheet.create({
container: {
  flex: 1,
  backgroundColor: '#25292e',
  alignItems: 'center',
},
imageContainer: {
  flex: 1,
},
footerContainer: {
  flex: 1 / 3,
  alignItems: 'center',
},
});

import { View, StyleSheet } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { useState } from 'react';

import Button from '@/components/Button';
import ImageViewer from '@/components/ImageViewer';

const PlaceholderImage = require('@/assets/images/background-image.png');

export default function Index() {
const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);

const pickImageAsync = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ['images'],
    allowsEditing: true,
    quality: 1,
  });

  if (!result.canceled) {
    setSelectedImage(result.assets[0].uri);
  } else {
    alert('You did not select any image.');
  }
};

return (
  <View style={styles.container}>
    <View style={styles.imageContainer}>
      <ImageViewer imgSource={PlaceholderImage} selectedImage={selectedImage} />
    </View>
    <View style={styles.footerContainer}>
      <Button theme="primary" label="Choose a photo" onPress={pickImageAsync} />
      <Button label="Use this photo" />
    </View>
  </View>
);
}

const styles = StyleSheet.create({
container: {
  flex: 1,
  backgroundColor: '#25292e',
  alignItems: 'center',
},
imageContainer: {
  flex: 1,
},
footerContainer: {
  flex: 1 / 3,
  alignItems: 'center',
},
});

import { StyleSheet } from 'react-native';
import { Image, type ImageSource } from 'expo-image';

type Props = {
imgSource: ImageSource;
selectedImage?: string;
};

export default function ImageViewer({ imgSource, selectedImage }: Props) {
const imageSource = selectedImage ? { uri: selectedImage } : imgSource;

return <Image source={imageSource} style={styles.image} />;
}

const styles = StyleSheet.create({
image: {
  width: 320,
  height: 440,
  borderRadius: 18,
},
});