🚀 React Native Expo 开发从入门到精通教程

todo-app/
├── App.js                    # 主应用入口，可能包含导航
├── components/               # 可复用的UI组件
│   ├── TodoInput.js          # 输入待办事项组件
│   ├── TodoItem.js           # 单个待办事项组件
│   └── FilterButtons.js      # 筛选按钮组件
├── screens/                  # 屏幕/页面组件
│   └── TodoScreen.js         # 待办事项主屏幕
└── utils/                    # 工具函数
    └── storage.js            # 本地存储工具

import AsyncStorage from '@react-native-async-storage/async-storage'; // 导入AsyncStorage

const STORAGE_KEY = '@todo_app_data';

export const storage = {
  // 保存数据
  async save(todos) {
    try {
      await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
    } catch (error) {
      console.error('保存数据失败:', error);
    }
  },

  // 读取数据
  async load() {
    try {
      const data = await AsyncStorage.getItem(STORAGE_KEY);
      return data ? JSON.parse(data) : []; // 如果没有数据，返回空数组
    } catch (error) {
      console.error('读取数据失败:', error);
      return [];
    }
  },

  // 清空数据 (可选)
  async clear() {
    try {
      await AsyncStorage.removeItem(STORAGE_KEY);
    } catch (error) {
      console.error('清空数据失败:', error);
    }
  }
};

import React, { useState, useEffect, useCallback } from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList, // 用于高效渲染列表
  KeyboardAvoidingView, // 避免键盘遮挡输入框
  Platform, // 检测平台
  Alert,
  TextInput, // 输入框
  TouchableOpacity // 自定义按钮
} from 'react-native';
// import TodoInput from '../components/TodoInput'; // 假设这些组件已定义
// import TodoItem from '../components/TodoItem';
// import FilterButtons from '../components/FilterButtons';
import { storage } from '../utils/storage'; // 导入本地存储工具

// 模拟的 TodoInput, TodoItem, FilterButtons
const TodoInput = ({ onAddTodo }) => {
  const [text, setText] = useState('');
  const handleAdd = () => {
    onAddTodo(text);
    setText('');
  };
  return (
    <View style={todoInputStyles.container}>
      <TextInput
        style={todoInputStyles.input}
        placeholder="添加新的待办事项..."
        value={text}
        onChangeText={setText}
        onSubmitEditing={handleAdd}
      />
      <TouchableOpacity style={todoInputStyles.button} onPress={handleAdd}>
        <Text style={todoInputStyles.buttonText}>添加</Text>
      </TouchableOpacity>
    </View>
  );
};
const todoInputStyles = StyleSheet.create({ /* ... */ }); // 简化，实际代码中应有样式

const TodoItem = ({ todo, onToggle, onDelete, onEdit }) => (
  <View style={todoItemStyles.container}>
    <TouchableOpacity onPress={onToggle} style={todoItemStyles.checkbox}>
      <Text>{todo.completed ? '✅' : '⬜'}</Text>
    </TouchableOpacity>
    <Text 
      style={[
        todoItemStyles.text, 
        todo.completed && todoItemStyles.completedText
      ]}
    >
      {todo.text}
    </Text>
    <TouchableOpacity onPress={onDelete} style={todoItemStyles.deleteButton}>
      <Text style={todoItemStyles.deleteButtonText}>删除</Text>
    </TouchableOpacity>
  </View>
);
const todoItemStyles = StyleSheet.create({ /* ... */ }); // 简化

const FilterButtons = ({ currentFilter, onFilterChange, stats }) => (
  <View style={filterButtonsStyles.container}>
    {['all', 'active', 'completed'].map(filter => (
      <TouchableOpacity
        key={filter}
        style={[
          filterButtonsStyles.button,
          currentFilter === filter && filterButtonsStyles.activeButton
        ]}
        onPress={() => onFilterChange(filter)}
      >
        <Text style={filterButtonsStyles.buttonText}>{filter.toUpperCase()}</Text>
      </TouchableOpacity>
    ))}
  </View>
);
const filterButtonsStyles = StyleSheet.create({ /* ... */ }); // 简化


const FILTER_OPTIONS = {
  ALL: 'all',
  ACTIVE: 'active',
  COMPLETED: 'completed'
};

export default function TodoScreen() {
  const [todos, setTodos] = useState([]);
  const [filter, setFilter] = useState(FILTER_OPTIONS.ALL);

  // 初次加载时从本地存储读取待办事项
  useEffect(() => {
    loadTodos();
  }, []);

  // 待办事项列表更新时，保存到本地存储
  useEffect(() => {
    if (todos.length >= 0) { // 确保即使空数组也保存
      storage.save(todos);
    }
  }, [todos]);

  // 从本地存储加载待办事项
  const loadTodos = async () => {
    const savedTodos = await storage.load();
    setTodos(savedTodos);
  };

  // 添加待办事项
  const addTodo = useCallback((text) => {
    if (text.trim()) {
      const newTodo = {
        id: Date.now().toString(), // 使用时间戳作为唯一ID
        text: text.trim(),
        completed: false,
        createdAt: new Date().toISOString()
      };
      setTodos(prev => [newTodo, ...prev]); // 新事项添加到列表顶部
    }
  }, []);

  // 切换待办事项的完成状态
  const toggleTodo = useCallback((id) => {
    setTodos(prev => 
      prev.map(todo => 
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  }, []);

  // 删除待办事项，带有确认弹窗
  const deleteTodo = useCallback((id) => {
    Alert.alert(
      '确认删除',
      '确定要删除这个待办事项吗？',
      [
        { text: '取消', style: 'cancel' },
        { 
          text: '删除', 
          style: 'destructive',
          onPress: () => {
            setTodos(prev => prev.filter(todo => todo.id !== id));
          }
        }
      ]
    );
  }, []);

  // 编辑待办事项文本
  const editTodo = useCallback((id, newText) => {
    if (newText.trim()) {
      setTodos(prev => 
        prev.map(todo => 
          todo.id === id ? { ...todo, text: newText.trim() } : todo
        )
      );
    }
  }, []);

  // 根据当前筛选条件过滤待办事项
  const filteredTodos = todos.filter(todo => {
    switch (filter) {
      case FILTER_OPTIONS.ACTIVE:
        return !todo.completed;
      case FILTER_OPTIONS.COMPLETED:
        return todo.completed;
      default: // ALL
        return true;
    }
  });

  // 计算待办事项统计数据
  const getStats = () => {
    const total = todos.length;
    const completed = todos.filter(todo => todo.completed).length;
    const active = total - completed;
    return { total, completed, active };
  };

  const stats = getStats();

  return (
    <KeyboardAvoidingView 
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'} // iOS使用'padding'，Android使用'height'
    >
      <View style={styles.content}>
        <Text style={styles.title}>我的待办事项</Text>
        
        {/* 统计信息 */}
        <View style={styles.statsContainer}>
          <Text style={styles.statsText}>
            总计: {stats.total} | 进行中: {stats.active} | 已完成: {stats.completed}
          </Text>
        </View>

        {/* 输入框 */}
        <TodoInput onAddTodo={addTodo} />

        {/* 筛选按钮 */}
        <FilterButtons 
          currentFilter={filter}
          onFilterChange={setFilter}
          stats={stats}
        />

        {/* 待办事项列表 */}
        <FlatList
          style={styles.list}
          data={filteredTodos}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => (
            <TodoItem
              todo={item}
              onToggle={() => toggleTodo(item.id)}
              onDelete={() => deleteTodo(item.id)}
              onEdit={(newText) => editTodo(item.id, newText)}
            />
          )}
          showsVerticalScrollIndicator={false}
          ListEmptyComponent={ // 列表为空时的提示
            <Text style={styles.emptyListText}>暂无待办事项，快来添加吧！</Text>
          }
        />
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
  },
  content: {
    flex: 1,
    padding: 20,
    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 20, // 适配Android刘海屏
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#2c3e50',
    textAlign: 'center',
    marginBottom: 20,
  },
  statsContainer: {
    backgroundColor: 'white',
    padding: 15,
    borderRadius: 10,
    marginBottom: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  statsText: {
    textAlign: 'center',
    color: '#7f8c8d',
    fontSize: 14,
  },
  list: {
    flex: 1,
  },
  emptyListText: {
    textAlign: 'center',
    marginTop: 50,
    fontSize: 16,
    color: '#7f8c8d',
  },
  // 简化的 TodoInput 样式
  ...StyleSheet.create({
    container: {
      flexDirection: 'row',
      marginBottom: 15,
      height: 50,
    },
    input: {
      flex: 1,
      borderColor: '#ccc',
      borderWidth: 1,
      borderRadius: 8,
      paddingHorizontal: 10,
      marginRight: 10,
      backgroundColor: 'white',
      fontSize: 16,
    },
    button: {
      backgroundColor: '#3498db',
      paddingHorizontal: 20,
      borderRadius: 8,
      justifyContent: 'center',
      alignItems: 'center',
    },
    buttonText: {
      color: 'white',
      fontSize: 16,
      fontWeight: 'bold',
    },
  }).todoInput,
  // 简化的 TodoItem 样式
  ...StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: 'white',
      padding: 15,
      borderRadius: 10,
      marginBottom: 10,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.05,
      shadowRadius: 2,
      elevation: 1,
    },
    checkbox: {
      marginRight: 10,
      padding: 5,
    },
    text: {
      flex: 1,
      fontSize: 17,
      color: '#333',
    },
    completedText: {
      textDecorationLine: 'line-through',
      color: '#aaa',
    },
    deleteButton: {
      backgroundColor: '#e74c3c',
      paddingHorizontal: 12,
      paddingVertical: 6,
      borderRadius: 5,
      marginLeft: 10,
    },
    deleteButtonText: {
      color: 'white',
      fontSize: 14,
    },
  }).todoItem,
  // 简化的 FilterButtons 样式
  ...StyleSheet.create({
    container: {
      flexDirection: 'row',
      justifyContent: 'space-around',
      marginBottom: 20,
      backgroundColor: 'white',
      borderRadius: 10,
      padding: 5,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.05,
      shadowRadius: 2,
      elevation: 1,
    },
    button: {
      flex: 1,
      paddingVertical: 10,
      borderRadius: 8,
      alignItems: 'center',
    },
    activeButton: {
      backgroundColor: '#3498db',
    },
    buttonText: {
      color: '#555',
      fontWeight: 'bold',
    },
    activeButtonText: {
      color: 'white',
    },
  }).filterButtons,
});

weather-app/
├── App.js
├── components/
│   ├── WeatherCard.js       # 当前天气卡片
│   ├── SearchBar.js         # 城市搜索栏
│   ├── ForecastList.js      # 7天预报列表
│   └── LoadingSpinner.js    # 加载指示器
├── services/
│   ├── weatherAPI.js        # OpenWeatherMap API服务
│   └── locationService.js   # Expo Location 服务
└── screens/
    └── WeatherScreen.js     # 主天气显示屏幕

import { WeatherAPI_KEY } from '@env'; // 假设您使用@env或类似库管理环境变量

const BASE_URL = 'https://api.openweathermap.org/data/2.5';

export const weatherAPI = {
  // 获取当前位置天气
  async getCurrentWeather(lat, lon) {
    try {
      const response = await fetch(
        `${BASE_URL}/weather?lat=${lat}&lon=${lon}&appid=${WeatherAPI_KEY}&units=metric&lang=zh_cn`
      );
      const data = await response.json();
      if (data.cod !== 200) throw new Error(data.message || '获取当前天气失败');
      return this.formatWeatherData(data);
    } catch (error) {
      console.error('获取天气数据失败:', error);
      throw error;
    }
  },

  // 搜索城市天气
  async searchCityWeather(cityName) {
    try {
      const response = await fetch(
        `${BASE_URL}/weather?q=${encodeURIComponent(cityName)}&appid=${WeatherAPI_KEY}&units=metric&lang=zh_cn`
      );
      const data = await response.json();
      if (data.cod !== 200) throw new Error(data.message || '搜索城市天气失败');
      return this.formatWeatherData(data);
    } catch (error) {
      console.error('搜索城市天气失败:', error);
      throw error;
    }
  },

  // 获取7天天气预报 (需要One Call API，该API返回当前、小时、日预报)
  async getForecast(lat, lon) {
    try {
      const response = await fetch(
        `${BASE_URL}/onecall?lat=${lat}&lon=${lon}&exclude=minutely,hourly,alerts&appid=${WeatherAPI_KEY}&units=metric&lang=zh_cn`
      );
      const data = await response.json();
      if (data.cod) throw new Error(data.message || '获取预报失败'); // One Call API没有cod字段，但以防万一
      return this.formatForecastData(data);
    } catch (error) {
      console.error('获取预报数据失败:', error);
      throw error;
    }
  },

  // 格式化当前天气数据
  formatWeatherData(data) {
    return {
      city: data.name,
      country: data.sys.country,
      temperature: Math.round(data.main.temp),
      description: data.weather[0].description,
      icon: data.weather[0].icon,
      humidity: data.main.humidity,
      windSpeed: data.wind.speed,
      pressure: data.main.pressure,
      feelsLike: Math.round(data.main.feels_like),
      visibility: data.visibility / 1000, // 转换为公里
      lat: data.coord.lat, // 用于获取预报
      lon: data.coord.lon, // 用于获取预报
    };
  },

  // 格式化预报数据
  formatForecastData(data) {
    return data.daily.slice(0, 7).map(day => ({
      date: new Date(day.dt * 1000).toLocaleDateString('zh-CN', { 
        weekday: 'long', 
        month: 'short', 
        day: 'numeric' 
      }),
      high: Math.round(day.temp.max),
      low: Math.round(day.temp.min),
      description: day.weather[0].description,
      icon: day.weather[0].icon,
      humidity: day.humidity,
      windSpeed: day.wind_speed,
    }));
  }
};

import * as Location from 'expo-location'; // 导入Expo位置服务

export const locationService = {
  // 请求位置权限
  async requestLocationPermission() {
    const { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') {
      throw new Error('位置权限被拒绝，请在设置中允许应用获取位置信息。');
    }
    return status;
  },

  // 获取当前位置
  async getCurrentPosition() {
    try {
      const status = await this.requestLocationPermission();
      if (status !== 'granted') {
        throw new Error('需要位置权限才能获取天气');
      }

      // 获取当前位置，精度高
      const location = await Location.getCurrentPositionAsync({
        accuracy: Location.Accuracy.High,
      });

      return {
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
      };
    } catch (error) {
      console.error('获取位置失败:', error);
      throw error;
    }
  },

  // 反向地理编码（坐标转地址，可选功能）
  async reverseGeocode(latitude, longitude) {
    try {
      const addresses = await Location.reverseGeocodeAsync({
        latitude,
        longitude,
      });
      
      if (addresses.length > 0) {
        const address = addresses[0];
        return {
          city: address.city || address.region, // 优先城市，其次是区域
          region: address.region,
          country: address.country,
        };
      }
      return null;
    } catch (error) {
      console.error('反向地理编码失败:', error);
      return null;
    }
  }
};

import React, { useState, useEffect, useCallback } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView, // 用于可滚动内容
  RefreshControl, // 下拉刷新
  Alert,
  StatusBar, // 控制状态栏样式
} from 'react-native';
import { weatherAPI } from '../services/weatherAPI';
import { locationService } from '../services/locationService';
// import WeatherCard from '../components/WeatherCard'; // 假设已定义
// import SearchBar from '../components/SearchBar';
// import ForecastList from '../components/ForecastList';
// import LoadingSpinner from '../components/LoadingSpinner';

// 模拟的 WeatherCard, SearchBar, ForecastList, LoadingSpinner
const WeatherCard = ({ weather }) => (
  <View style={weatherCardStyles.container}>
    <Text style={weatherCardStyles.city}>{weather.city}, {weather.country}</Text>
    <Text style={weatherCardStyles.temperature}>{weather.temperature}°C</Text>
    <Text style={weatherCardStyles.description}>{weather.description}</Text>
    {/* 更多天气详情 */}
  </View>
);
const weatherCardStyles = StyleSheet.create({ /* ... */ });

const SearchBar = ({ onSearch, onLocationPress, searching }) => {
  const [query, setQuery] = useState('');
  return (
    <View style={searchBarStyles.container}>
      <TextInput
        style={searchBarStyles.input}
        placeholder="搜索城市..."
        value={query}
        onChangeText={setQuery}
        onSubmitEditing={() => onSearch(query)}
      />
      <TouchableOpacity style={searchBarStyles.button} onPress={() => onSearch(query)}>
        <Text style={searchBarStyles.buttonText}>搜索</Text>
      </TouchableOpacity>
      <TouchableOpacity style={searchBarStyles.button} onPress={onLocationPress}>
        <Text style={searchBarStyles.buttonText}>📍</Text>
      </TouchableOpacity>
    </View>
  );
};
const searchBarStyles = StyleSheet.create({ /* ... */ });

const ForecastList = ({ forecast }) => (
  <View style={forecastListStyles.container}>
    <Text style={forecastListStyles.title}>未来7天预报</Text>
    {forecast.map((day, index) => (
      <View key={index} style={forecastListStyles.item}>
        <Text style={forecastListStyles.date}>{day.date}</Text>
        <Text>{day.high}°C / {day.low}°C</Text>
        <Text>{day.description}</Text>
      </View>
    ))}
  </View>
);
const forecastListStyles = StyleSheet.create({ /* ... */ });

const LoadingSpinner = () => (
  <View style={loadingSpinnerStyles.container}>
    <ActivityIndicator size="large" color="#0000ff" />
    <Text>加载中...</Text>
  </View>
);
const loadingSpinnerStyles = StyleSheet.create({ /* ... */ });


export default function WeatherScreen() {
  const [weather, setWeather] = useState(null);
  const [forecast, setForecast] = useState([]);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [searching, setSearching] = useState(false);

  // 初始化加载天气数据
  useEffect(() => {
    loadWeatherData(true); // 默认加载当前位置天气
  }, []);

  // 加载天气数据函数
  const loadWeatherData = async (useLocation = true, cityName = null, lat = null, lon = null) => {
    try {
      setLoading(true);
      
      let currentLat = lat;
      let currentLon = lon;

      if (useLocation) {
        // 使用当前位置
        const location = await locationService.getCurrentPosition();
        currentLat = location.latitude;
        currentLon = location.longitude;
      } else if (cityName) {
        // 搜索指定城市，需要先获取城市坐标
        // OpenWeatherMap的/weather接口会返回coord，可以提取出来用于获取forecast
        const searchedWeather = await weatherAPI.searchCityWeather(cityName);
        setWeather(searchedWeather); // 立即更新当前天气
        currentLat = searchedWeather.lat;
        currentLon = searchedWeather.lon;
      }

      if (currentLat && currentLon) {
        // 同时请求当前天气和预报
        const [weatherData, forecastData] = await Promise.all([
          useLocation ? weatherAPI.getCurrentWeather(currentLat, currentLon) : weatherAPI.searchCityWeather(cityName),
          weatherAPI.getForecast(currentLat, currentLon),
        ]);
        setWeather(weatherData);
        setForecast(forecastData);
      } else {
        throw new Error('无法获取地理位置信息');
      }

    } catch (error) {
      Alert.alert('错误', error.message || '获取天气数据失败');
      setWeather(null); // 清空天气数据
      setForecast([]);
    } finally {
      setLoading(false);
      setRefreshing(false);
      setSearching(false);
    }
  };

  // 下拉刷新回调
  const onRefresh = useCallback(() => {
    setRefreshing(true);
    // 刷新当前显示的天气，如果是搜索结果，则刷新搜索结果
    if (weather && weather.lat && weather.lon) {
      loadWeatherData(false, null, weather.lat, weather.lon);
    } else {
      loadWeatherData(true); // 否则加载当前位置
    }
  }, [weather]);

  // 处理城市搜索
  const handleSearch = useCallback(async (query) => {
    if (!query.trim()) return;
    
    setSearching(true);
    await loadWeatherData(false, query.trim());
  }, []);

  // 切换到当前位置
  const handleLocationPress = useCallback(() => {
    loadWeatherData(true);
  }, []);

  if (loading) {
    return <LoadingSpinner />;
  }

  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" backgroundColor="#74b9ff" />
      
      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            colors={['#0984e3']}
            tintColor="#0984e3" // iOS加载指示器颜色
          />
        }
      >
        {/* 搜索栏 */}
        <SearchBar
          onSearch={handleSearch}
          onLocationPress={handleLocationPress}
          searching={searching}
        />

        {/* 当前天气卡片 */}
        {weather ? (
          <WeatherCard
            weather={weather}
          />
        ) : (
          <Text style={styles.noDataText}>未能获取天气数据。</Text>
        )}

        {/* 7天预报 */}
        {forecast.length > 0 && (
          <ForecastList forecast={forecast} />
        )}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#74b9ff', // 背景色为蓝色
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    paddingBottom: 20,
    alignItems: 'center', // 使内容居中
  },
  noDataText: {
    color: 'white',
    fontSize: 18,
    marginTop: 50,
  },
});