移动开发新年活动

// 使用React Native框架
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import axios from 'axios';

const WeatherApp = () => {
  const [weatherData, setWeatherData] = useState(null);

  useEffect(() => {
    const fetchWeather = async () => {
      try {
        const response = await axios.get('https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=Beijing');
        setWeatherData(response.data);
      } catch (error) {
        console.error('Error fetching weather data:', error);
      }
    };

    fetchWeather();
  }, []);

  return (
    <View style={styles.container}>
      {weatherData ? (
        <>
          <Text style={styles.title}>{weatherData.location.name}</Text>
          <Text style={styles.temp}>{weatherData.current.temp_c}°C</Text>
          <Text style={styles.condition}>{weatherData.current.condition.text}</Text>
        </>
      ) : (
        <Text>Loading...</Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  temp: {
    fontSize: 48,
  },
  condition: {
    fontSize: 18,
  },
});

export default WeatherApp;