1 序言

本节主要说的是一个基于React-Native的天气APP，通过本案例的练习，可以初步的了解React Native的基本使用方法。

2 系统架构图

整体的软件构架如下图所示：

3 实现

3.1 修改项目入口文件 index.js

修改后的项目入口文件如下：

import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
import WeatherHome from "./src/weather/WeatherHome";

AppRegistry.registerComponent(appName, () => SimpleList);

3.2 天气主页面

新建天气主页面 WeatherHome.js 文件，文件主要内容如下：

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    ImageBackground,
    TextInput,
    Dimensions,
} from 'react-native';
import Forecast from "./Forecast";
import WeatherData from "./WeatherData";

export default class WeatherHome extends Component {

    constructor(props) {
        super(props);
        this.state = {zip:"",forecast: null};
    }

    _handleTextChange  = event => {
        let zip = event.nativeEvent.text;
        console.log('邮政编码'+ zip);
        WeatherData.fetchForecast(zip).then(forecast =>{
            console.log(forecast);
            this.setState({forecast:forecast});
        });
    };

    render() {
        let content = null;
        if(this.state.forecast != null){
            content = (
                <Forecast
                    main = {this.state.forecast.main}
                    description = {this.state.forecast.description}
                    temp = {this.state.forecast.temp}
                />
            );
        }
        return (
            <View style = {styles.container}>
                <ImageBackground
                    source={require("./../../assets/img/weather.jpeg")}
                    resizeMode="cover"
                    style={styles.backdrop}
                >
                    <View style = {styles.weather_layout}>
                        <View style = {styles.city_info}>
                            <Text style={styles.welcome}>
                                城市：{this.state.zip}
                            </Text>
                            <TextInput
                                style = {styles.input}
                                onSubmitEditing={this._handleTextChange}
                                underlineColorAndroid="transparent"
                            >
                            </TextInput>
                        </View>
                        {content}
                    </View>
                </ImageBackground>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: { flex: 1, alignItems: "center" },
    city_info:{
        flexDirection: 'row',
        width:Dimensions.get('window').width
    },
    weather_layout:{
        paddingTop: 5,
        backgroundColor: "#000000",
        opacity: 0.5,
        flexDirection: "column",
        alignItems: "center"
    },
    backdrop:{
        flex: 1,
        flexDirection: "column",
        width: Dimensions.get('window').width,
    },
    welcome:{
        fontSize:20,
        textAlign:"center",
        margin:10
    },
    input:{
        fontSize: 30,
        padding: 2,
        height: 50,
        textAlign: "center",
        color: "#ffffff"
    }
});

3.3 天气查询后显示页面

新建天气主页面 Forecast.js 文件，文件主要内容如下：

import React, {Component} from 'react'
import {
    StyleSheet,
    View,
    Text
} from 'react-native';

export default class Forecast extends Component{
    render() {
        return (
            <View style = {styles.container}>
                <Text style = {styles.bigText}>
                    {this.props.main}
                </Text>
                <Text style = {styles.mainText}>
                    此刻天气状态：{this.props.description}
                </Text>
                <Text style = {styles.bigText}>
                    温度：{this.props.temp} F
                </Text>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container:{
        height: 180
    },
    mainText:{
        flex: 1,
        fontSize: 20,
        textAlign: "center",
        color: "#FFFFFF"
    },
    bigText:{
        flex: 2,
        fontSize: 20,
        textAlign: "center",
        margin: 10,
        color: "#FFFFFF"
    }
});

3.4 天气数据获取

const WEATHER_API_KEY = "bbeb34ebf60ad50f7893e7440a1e2b0b";
const API_STEM = "http://api.openweathermap.org/data/2.5/weather?";

function zipUrl(zip) {
    return `${API_STEM}q=${zip}&units=imperial&APPID=${WEATHER_API_KEY}`;
}

function fetchForecast(zip) {
    return fetch(zipUrl(zip))
        .then(response => response.json())
        .then(responseJSON => {
            return {
                main: responseJSON.weather[0].main,
                description: responseJSON.weather[0].description,
                temp: responseJSON.main.temp
            };
        })
        .catch(error => {
            console.error(error);
        });
}

export default { fetchForecast: fetchForecast };

4 运行效果图

cd WeatherDemo
react-native start
react-native run-android

5 相关资源下载

关注微信公众号“AI Technology Space”，回复“WeatherDemo”下载源代码哦，感谢大家的支持！