React Native 天气应用教程

在本文中，我们将学习如何使用 React Native 创建一个简单的天气应用。这个应用将展示如何从网络获取天气数据，并将其展示在用户界面上。

获取天气数据

首先，我们需要一个天气API来获取数据。以下是一个示例API链接：OpenWeatherMap。

安装依赖

在你的React Native项目中，你需要安装以下依赖：

npm install axios

创建组件

创建一个新的React Native组件 WeatherApp.js：

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import axios from 'axios';

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

  useEffect(() => {
    const fetchWeatherData = async () => {
      try {
        const response = await axios.get('https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY');
        setWeatherData(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchWeatherData();
  }, []);

  if (!weatherData) {
    return <Text>Loading...</Text>;
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{weatherData.name}</Text>
      <Image
        style={styles.icon}
        source={{ uri: `https://openweathermap.org/img/wn/${weatherData.weather[0].icon}@2x.png` }}
      />
      <Text style={styles.temperature}>{Math.round(weatherData.main.temp - 273.15)}°C</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  icon: {
    width: 100,
    height: 100,
  },
  temperature: {
    fontSize: 48,
    fontWeight: 'bold',
  },
});

export default WeatherApp;

使用组件

在你的App组件中，导入并使用 WeatherApp 组件：

import React from 'react';
import { StyleSheet, View } from 'react-native';
import WeatherApp from './WeatherApp';

const App = () => {
  return (
    <View style={styles.container}>
      <WeatherApp />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

export default App;

总结

通过以上步骤，你已经创建了一个简单的React Native天气应用。你可以根据自己的需求进一步扩展这个应用，比如添加更多城市的选择、添加天气预报等功能。

Weather Icon

返回社区首页