概述

通過上一篇我們已經通過命令列工具構建了第一個 React Native 應用，並在 iOS 裝置中成功執行，熟悉了工程的檔案程式碼組織結構。我們將繼續使用該工程來開發一個天氣應用，以此初步建立對 StyleSheet、 flexbox、 使用者輸入、元件新增、網路訪問 等概念的理解。

建立 WeatherMain.js 並移動預設元件程式碼

WeatherMain.js

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

export default class WeatherMain extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to Hello RN Weather !
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});複製程式碼

精簡 index.ios.js 和 index.ios.js

import { AppRegistry } from 'react-native'
import WeatherMain from './WeatherMain'

AppRegistry.registerComponent('HelloRNWeather', () => WeatherMain);複製程式碼

更改 AppDelegate 中根檢視元件 moduleName

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"HelloRNWeather"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];複製程式碼

此時，確保專案重新啟動可正常執行。

處理使用者輸入

新增一個輸入框，以便使用者可通過輸入郵編來獲取對應地區的天氣

在 render 函式前新增一段處理生命週期的程式碼

constructor(props) {
    super(props)
    this.state = {
        zip: ''
    }
}複製程式碼

修改顯示內容為郵編

<Text style={styles.welcome}>
     地區郵編： {this.state.zip}
</Text>複製程式碼

新增 TextInput 輸入框元件，並監聽輸入事件

<TextInput style={styles.input} onSubmitEditing={(event) => this._handleInputTextDidChanged(event)}/>複製程式碼

在 styles 中新增新的 input 樣式

input: {
  fontSize: 20,
  borderWidth: 3,
  height: 44,
}複製程式碼

新增事件監聽回撥函式

_handleInputTextDidChanged(event) {
    this.setState({zip: event.nativeEvent.text});
}複製程式碼

記得更新匯入語句

import {
  ...
  TextInput,
  ...
} from 'react-native';複製程式碼

在 iOS 模擬器執行專案，現在可以成功顯示輸入的內容了

展現資料

mock 一些天氣資料

constructor(props) {
    super(props);

    this.state = {
        zip: '',
        forecast: {
            main: 'Snow',
            description: 'very cold',
            temp: 3
        }
    }
}複製程式碼

建立 Forecast.js作為天氣預報元件

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

export default class Forecast extends Component {
  render() {
    return (
      <View>
        <Text style={styles.bigText}>
          {this.props.main}
        </Text>
        <Text style={styles.mainText}>
          {this.props.description}
        </Text>
        <Text style={styles.bigText}>
          {this.props.temp} ℃
        </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  bigText: {
    flex: 2,
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#374256'
  },
  mainText: {
    flex: 1,
    fontSize: 16,
    textAlign: 'center',
    color: '#374256'
  }
})複製程式碼

將 Forecast 元件新增到 WeatherMain

import Forecast from './Forecast' // 匯入 Forecast 

    <View style={styles.container}>
       ......
       <Forecast main={this.state.forecast.main} description={this.state.forecast.description} temp={this.state.forecast.temp}/>
       ......
    </View>複製程式碼

新增完成後，iOS 模擬器 Command + R 即可看到之前mock的資料展現出來了，至於美觀上的問題，接下來專門摸索樣式佈局的時候再來慢慢解決。

新增背景圖片

將資原始檔放入工程目錄

匯入 Image 元件

import {
  ...
  Image,
  ...
} from 'react-native';複製程式碼

將 Image 元件作為容器使用新增到檢視中

<Image source={require("./background.jpg")} resizeMode='cover' style={styles.background}>
    <View style={styles.overlay}>
        <Text style={styles.welcome}>
                  地區郵編： {this.state.zip}
        </Text>
        <TextInput style={styles.input} onSubmitEditing={(event) => this._handleInputTextDidChanged(event)}/>
         <Forecast main={this.state.forecast.main} description={this.state.forecast.description} temp={this.state.forecast.temp}/>
     </View>
</Image>複製程式碼

重新整理即可看到新增的背景圖片了，當然了，仍然還是醜，後面我們再慢慢來解決樣式佈局問題，感覺前端的佈局確實和 AutoLayout 很不一樣啊~ /無奈攤手

獲取網路資料

接下來，我們將嘗試通過網路訪問來用真實資料來替換之前的 mock 資料。

React Native 中的 fetch 介面基於 Promise 語法風格

fetch('http://wthrcdn.etouch.cn/weather_mini?citykey=101010100')
  .then((response) => response.json())
  .then((responseJSON) => {
     // handle Response
  })
  .catch((error) => {
     console.warn(error);
  })複製程式碼

在 render 中更新渲染邏輯

render() {
  var content = null;
  if (this.state.forecast !== null) {
     content = <Forecast main={this.state.forecast.main} description={this.state.forecast.description} temp={this.state.forecast.temp}/>;
  }
  ......
}複製程式碼

使用網路訪問替代 mock 資料

this.state = {
    zip: '',
    forecast: null
};
fetch('http://wthrcdn.etouch.cn/weather_mini?citykey=101010100')
    .then((res) => {
    return res.json()
    })
    .then((responseJSON) => {
        this.setState({
        forecast: {
          main: responseJSON.data.forecast[0].type,
          description: responseJSON.data.ganmao,
          temp: responseJSON.data.wendu,
        }
     });
    })
    .catch((error) => {
      console.warn(error);
    })複製程式碼

重新整理就能看到北京的真實天氣了

== 若出現網路錯誤，是因為蘋果 iOS 9 起不再支援http協議，需要對特定域名進行額外處理。 ==

總結

這樣下來，我們就對 StyleSheet、 flexbox、 使用者輸入、元件新增、網路訪問 等概念都有基本的認識，也完成了一個能顯示實時天氣的小應用了。不過它現在還很簡陋、也不美觀，接下來我們將在進一步認識移動應用元件後再對樣式佈局進行優化。

操練程式碼：Binlogo/HelloReactNative - Github