優聯實達_學習 React Native 12_React Native

學習 React Native 12

創建一個天氣應用

我們要開始脫離示例代碼，自己動手來創建一個天氣應用。（可以通過在命令行內輸入命令： react-native init WeatherProject 創建一個新的項目工程）這個例子讓我們有機會好好了解一下樣式表，flexbox，網絡通訊，用戶輸入以及圖像等這些布置在應用里抽組件組合是如何工作的。

這章節可能會略有點晦澀難懂，因為我們會更主要的是著眼于這些功能的全局運行，而不會著眼于更深刻的細致了解。該天氣應用會在未來的章節里作為參考來討論更為細節的功能特點。所以不用擔心進度是不是有點快。

最終的應用程序會帶有一個文本輸入框，允許用戶輸入郵政編碼進行查詢。程序會到開放的天氣地圖API 上拿到相應的天氣數據并展示當前的天氣信息。

處理用戶輸入

該應用得允許用戶能夠輸入郵政編碼，然后根據該信息得到該地區的天氣預報信息，所以應用就得有給用戶輸入郵編的文本輸入框。我們可以把輸入郵編信息的地方放入我們組件的初始化狀態里：

getInitialState: function() { return {
zip: '' };
},

然后，需要改變其中一個 TextViews 以顯示 this.state.zip 參數所對應的信息：

<Text style={styles.welcome}> You input {this.state.zip}.
</Text>

也有一個并不常用的方式，就是加入一個 <TextInput> 組件。這組件的基本功能就是允許用戶輸入文本信息。

 <TextInput
      returnKeyType='go'
      onSubmitEditing={handleText}/>

<TextInput>組件有很多props參數，可以在 React Native 網站上的文檔里找到。在這我們將參數 returnKeyType 設置為go, 表示我們會在用戶輸入完相關的信息并點按了回車鍵之后執行一個動作。類似props 參數有很多：比方，改變鍵盤的輸入類型為數字，以限制用戶在該狀態下只能輸入數字信息，但在該狀態下我們還得有一個返回鍵。其他的配置項包括了打開自動校正功能以及自動大寫功能的開關切換，或者是加入占位符文本。

您也可以傳遞給 <TextInput> 指定的回調函數，用來監聽其他的事件，諸如狀態變化或者是失去焦點等，但該功能當前我們還不需要。

處理文本信息的回調函數看下來應該是這樣的：

var handleText = (event) => { console.log(event.nativeEvent.text); this.setState({zip: event.nativeEvent.text})
};

控制臺的狀態是不相關的，但是如果您有特別需求，想要完全測試調試工具時，他也允許您這么做。

您也需要去更新您的輸入狀態：

var React = require('react-native'); var { 
... 
TextInput 
...?} = React;

現在就可以使用 iOS 的模擬器試著運行下所寫的程序了。該程序應該看起來很丑，并且也沒有樣式化，但當前該程序應該已經可以讓您成功提交一個郵編文本信息，并把該信息在 <Text> 組件里顯示出來了。

如果您想，我們在此處還可以加入些簡單的輸入校驗，以確保用戶輸入的是一個五位數的數字信息，目前暫時先把這個功能跳過。

顯示數據

現在讓我們來完成通過郵政編碼展示天氣預報信息吧。我們需要在 getInitialState 函數中加入一些測試數據：

getInitialState() { return {
        zip: '',
        forecast: {
          main: 'Clouds',
          description: 'few clouds',
          temp: 45.7
} }
}

為了能表述清楚，讓我們把天氣預報的渲染信息也同時加入到他自己的組件里。

var Forecast = React.createClass({ render: function() {
return ( <View>
<Text style={styles.bigText}> {this.props.main}
            </Text>
            <Text style={styles.mainText}>
Current conditions: {this.props.description} </Text>
<Text style={styles.bigText}> {this.props.temp}°F
            </Text>
          </View>
); }
});

<Forecast> 組件就會依據Props 參數的設定，渲染 <Text> 的顯示。這個樣式化方式非常簡單了。下面的代碼是從 StyleSheet.create 文件里搞錄出來的：

bigText: {
  flex: 2,
  fontSize: 20,
textAlign: 'center',
      margin: 10,
      color: '#FFFFFF'
    },
    mainText: {
      flex: 1,
      fontSize: 16,
      textAlign: 'center',
      color: '#FFFFFF'
}

將<Forecast>組件加到您應用程序中的渲染方法里，通過 this.state.forecase 傳遞props參數。我們將在后面章節里討論布局和樣式的時候更詳細的學習該議題。

不深思則不能造于道。不深思而得者，其得易失。
名人名言- 曾國藩

By 優聯實達
2015-12-05
2797
公司新聞，網站開發，網站設計，UI

學習 React Native 12

創建一個天氣應用

處理用戶輸入

顯示數據

新聞分類

關于我們

聯系方式

友情鏈接