學習 React Native 13
添加一個背景圖片
平白的背景色太枯燥了。讓我們在展示的時候添加一個背景圖片在我們的天氣預報小應用中吧。諸如圖片這樣的資源文件是需要被添加到 Xcode 項目中的。選擇 Images.xcassets 文件夾， 在這里添加一個新的圖片資源。 接下來就可以通過拖拽的方式把圖片加入到設置中。請確保圖片設置中的圖片名和圖片文件名是匹配的，不然React Native 無法將該圖片文件導入到應用中。
@2x 以及 @3x 這些不同的設置分別表示的是該圖片基于基準分辨率所對應的兩倍，以及三倍分辨率。因為天氣預報 應用是針對全版本的設備進行設計的（這也意味著我們的應用是可以同時運行在iPhone 以及 iPad 之上），Xcode 能夠讓我們上傳的圖片有多種相對應的分辨率以適應不同的設備。
現在，圖片已經導入了，讓我們跳回原來的 React 代碼。 加入一個背景圖片。加背景圖片并不能就象我們在網站開發那樣的在 <div> 里直接添加背景屬性。在這里我們可以直接用 <Image> 組件做為一個容器。
<Image source={require('image!flowers')}resizeMode='cover'style={styles.backdrop}> // Your content here</Image>
<Image>組件需要指定來源參數，我們通過使用 require 方法來實現。 調用 require (image!flowers)會讓 React Native 在Xcode 的圖片資源庫里尋找一個文件名為 flowers 的圖片資源。
千萬別忘記使用 flexDirection 來樣式化該組件，以便于他的子組件可以生成渲染如我們希望那樣：
backdrop: {flex: 1,flexDirection: 'column'}
現在可以賦予<Image> 更多的子組件了：
<Image source={require('image!flowers')}resizeMode='cover'<View style={styles.overlay}>style={styles.backdrop}><Text style={styles.mainText}><View style={styles.row}> Current weather for </Text>style={[styles.zipCode, styles.mainText]} returnKeyType='go' onSubmitEditing={this._handleTextChange}/><View style={styles.zipContainer}> <TextInput </View> </View>main={this.state.forecast.main} description={this.state.forecast.description} temp={this.state.forecast.temp}/><Forecast </View></Image>
你可能已經注意到了，我在這里使用了一些我們還沒有討論過的額外的一些樣式，比方說： row, overlay 以及 zipContainer 和 zipCode 樣式。 你也可以翻到本章最后去查看完整的樣式表。
從網站取回數據
接下來，讓我們一起探索使用 React Native里所提供的網絡 API。 你完全不需要通過使用Jquery 從移動設備上發送 AJAX請求！代替這種方式的是， React Native 完善了取回數據的 API. 使用取回數據的 API 非常直白簡單：
fetch('http://www.somesite.com').then((response) => response.text()).then((responseText) => {});console.log(responseText);
我們將使用 OpenWeatherMap 的 API, 該 API 為我們提供了一個很簡單的返回點，通過提供的郵政代碼返回他所對應的地區的天氣情況。
要整合這個 API, 我們需要在 <TextInput>組件里修改回調函數以便于查詢 OpenWeatherMap 的 API的信息：
_handleTextChange: function(event) {var zip = event.nativeEvent.text;fetch('http://api.openweathermap.org/data/2.5/weather?q=' + zip + '&units=imperial')this.setState({zip: zip});.then((responseJSON) => {.then((response) => response.json())console.log(responseJSON); // Take a look at the format, if you want. this.setState({forecast: { main: responseJSON.weather[0].main,.catch((error) => {description: responseJSON.weather[0].description, temp: responseJSON.main.temp } }); })}console.warn(error);});
需要注意的是我們希望返回來的數值類型是 JSON 的。 該取回數據的 API 非常簡單的與之合作，這也是所有我們需要做的事。
另一個我們需要做的就是刪除所有的占位數據了。 同時確保如果我們還沒有取得任何數據的時候，天氣預報的信息就不會被渲染。
首先，清除掉 getInitialState 里面的所有模擬數據：
getInitialState: function() { return {zip: '', forecast: null };}
接著，在 渲染器函數中，更新渲染邏輯：
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}/>;
}
最后，在渲染器函數中使用 {content}組件代替掉原來的 <ForeCast>.
不深思則不能造于道。不深思而得者，其得易失。
名人名言- 曾國藩
- By 優聯實達
- 2015-12-14
- 1932
- 公司新聞，網站開發，網站設計，UI