5. 基于手机APP开发实例--照片浏览器-CSDN博客

// App.js
import React, { useState } from 'react';
import { View, Image, Text, Button, StyleSheet, ScrollView } from 'react-native';

const images = [
    { id: '1', src: require('./assets/photo1.jpg') },
    { id: '2', src: require('./assets/photo2.jpg') },
    { id: '3', src: require('./assets/photo3.jpg') },
];

const App = () => {
    const [currentImage, setCurrentImage] = useState(images[0]);

    const nextImage = () => {
        const currentIndex = images.findIndex(img => img.id === currentImage.id);
        const nextIndex = (currentIndex + 1) % images.length;
        setCurrentImage(images[nextIndex]);
    };

    const prevImage = () => {
        const currentIndex = images.findIndex(img => img.id === currentImage.id);
        const prevIndex = (currentIndex - 1 + images.length) % images.length;
        setCurrentImage(images[prevIndex]);
    };

    return (
        <View style={styles.container}>
            <Text style={styles.header}>Photo Browser</Text>
            <ScrollView style={styles.imageContainer}>
                <Image source={currentImage.src} style={styles.image} />
            </ScrollView>
            <View style={styles.buttonContainer}>
                <Button title="Previous" onPress={prevImage} />
                <Button title="Next" onPress={nextImage} />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    header: {
        fontSize: 24,
        marginBottom: 20,
    },
    imageContainer: {
        width: '100%',
        height: '70%',
    },
    image: {
        width: '100%',
        height: '100%',
        resizeMode: 'contain',
    },
    buttonContainer: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        width: '100%',
        paddingHorizontal: 20,
    },
});

export default App;