6
🌟 Holistic Health Snap – Історія + Повний кодІсторія
Тепер, коли ваша родина тепла, і вони можуть залишатися здоровими завдяки навичкам санітарії та приготування їжі, спочатку все добре. Ви насолоджуєтеся життям і компанією один одного.
Здалеку ви чуєте крик своєї дитини. Вони щойно були в туалеті і щось не так. Ви не знаєте, що робити. У вас немає лікаря, лише ви самі. З чимось серйозно не так із фекаліями вашої дитини: вони білі й ніби живі. Ви в жаху. Ви згадуєте, що на вашому телефоні є новий додаток. Ви відкриваєте його:
Ви робите фото проблеми, і додаток миттєво її визначає та пропонує рішення. У вашої дитини черв'яки. Оскільки немає лікаря, дитина дізнається, що допомагає позбутися їх. Тепер у вас є план, і ви знаєте, що дитина в безпеці. Вони просто потребують допомоги.
Для цього додатку я хотів кілька речей:
Він має дозволяти робити фото проблем.
Має бути місце для постійного додавання та оновлення нових фото, щоб можна було визначати більше проблем.
🌐 React Native Code – Holistic Health Snapimport React, { useState, useEffect } from 'react'; import { View, Text, Button, Image, FlatList, TextInput, StyleSheet, TouchableOpacity } from 'react-native'; import { launchCamera } from 'react-native-image-picker'; import AsyncStorage from '@react-native-async-storage/async-storage'; // ------------------- // Категорії та природні засоби // ------------------- const CATEGORIES = [ { name: "Шкіра", remedies: ["Обережно очистити м'яким милом", "Нанести гель алое вера", "Уникати подряпин"] }, { name: "Укус комахи", remedies: ["Очистити укушене місце водою", "Нанести мед або алое", "Застосувати холодний компрес"] }, { name: "Синець", remedies: ["Спочатку прикласти холодний компрес", "Підняти уражену область", "Легкий масаж через 48 годин"] }, { name: "Паразити", remedies: ["Дотримуватися гігієни", "Кип'ятити воду перед питтям", "Вживати продукти з високим вмістом клітковини"] }, { name: "Інше", remedies: ["Тримати місце чистим", "Слідкувати за змінами", "Шукати допомогу, якщо погіршиться"] }, ]; // ------------------- // Основний додаток // ------------------- export default function App() { const [photoData, setPhotoData] = useState([]); const [description, setDescription] = useState(''); const [selectedCategory, setSelectedCategory] = useState(CATEGORIES[0].name); const [currentPhoto, setCurrentPhoto] = useState(null); useEffect(() => { loadData(); }, []); // Завантажити збережені фото const loadData = async () => { try { const data = await AsyncStorage.getItem('photos'); if (data !== null) setPhotoData(JSON.parse(data)); } catch (error) { console.log(error); } }; // Зберегти фото const saveData = async (newData) => { try { await AsyncStorage.setItem('photos', JSON.stringify(newData)); } catch (error) { console.log(error); } }; // Відкрити камеру const takePhoto = () => { launchCamera({ mediaType: 'photo', quality: 0.5 }, response => { if (response.assets && response.assets.length > 0) { setCurrentPhoto(response.assets[0].uri); } }); }; // Зберегти фото + опис + засоби const savePhoto = () => { if (!currentPhoto) return; const categoryObj = CATEGORIES.find(cat => cat.name === selectedCategory) || { remedies: [] }; const newEntry = { uri: currentPhoto, category: selectedCategory, description, remedies: categoryObj.remedies, timestamp: new Date().toISOString() }; const updatedData = [newEntry, ...photoData]; setPhotoData(updatedData); saveData(updatedData); setCurrentPhoto(null); setDescription(''); }; // ------------------- // Інтерфейс // ------------------- return ( <View style={styles.container}> <Text style={styles.header}>Holistic Health Snap</Text> <Button onPress={takePhoto} /> {currentPhoto && ( <View style={styles.preview}> <Image source={{ uri: currentPhoto }} style={styles.image} /> <TextInput value={description} onChangeText={setDescription} style={styles.input} /> <View style={styles.categories}> {CATEGORIES.map(cat => ( <TouchableOpacity key={cat.name} onPress={() => setSelectedCategory(cat.name)} style={[styles.categoryButton, selectedCategory === cat.name && styles.selectedCategory]} > <Text>{cat.name}</Text> </TouchableOpacity> ))} </View> <Button onPress={savePhoto} /> </View> )} <Text style={styles.subHeader}>Збережені фото та засоби:</Text> <FlatList data={photoData} keyExtractor={(item, index) => index.toString()} renderItem={({ item }) => ( <View style={styles.item}> <Image source={{ uri: item.uri }} style={styles.thumbnail} /> <View style={{ flex: 1, marginLeft: 10 }}> <Text style={styles.itemText}>Категорія: {item.category}</Text> <Text style={styles.itemText}>Опис: {item.description || "N/A"}</Text> <Text style={styles.itemText}>Дата: {new Date(item.timestamp).toLocaleString()}</Text> <Text style={styles.itemTextBold}>Природні засоби:</Text> {item.remedies.map((remedy, i) => ( <Text key={i} style={styles.itemText}>• {remedy}</Text> ))} </View> </View> )} /> </View> ); } // ------------------- // Стилі // ------------------- const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#f5f5f5' }, header: { fontSize: 28, fontWeight: 'bold', marginBottom: 10 }, subHeader: { fontSize: 20, marginTop: 20, marginBottom: 10 }, preview: { marginVertical: 10 }, image: { width: '100%', height: 200, marginBottom: 10 }, input: { borderColor: '#ccc', borderWidth: 1, padding: 8, marginBottom: 10, borderRadius: 5 }, categories: { flexDirection: 'row', flexWrap: 'wrap', marginBottom: 10 }, categoryButton: { padding: 8, borderWidth: 1, borderColor: '#ccc', borderRadius: 5, marginRight: 5, marginBottom: 5 }, selectedCategory: { backgroundColor: '#a0e1e5' }, item: { flexDirection: 'row', marginBottom: 10, backgroundColor: '#fff', padding: 10, borderRadius: 5 }, thumbnail: { width: 80, height: 80, borderRadius: 5 }, itemText: { fontSize: 14 }, itemTextBold: { fontSize: 16, fontWeight: 'bold', marginTop: 5 } }); Встановлення залежностей
Після створення нового проекту React Native:
npm install @react-navigation/native @react-navigation/stack react-native-image-picker @react-native-async-storage/async-storage npx pod-install ios # для iOS
✅ Функції додатку:
Знімки проблем зі здоров'ям
Збереження та перегляд даних
Категорії та природні засоби
Можливість подальшого розширення для автоматичного розпізнавання проблем
Bạn đang đọc truyện trên: ZingTruyen.Xyz