摘要:承接上文基礎練習指北一,我們來看看如果通過接口獲取線上數據并展示。如果使用無法刷新效果,請檢查的權限設置。會在組件加載完成后,使用方法發送請求,并且只發送一次。牢記在最后要使用,否則不會出現錯誤提示。下一步在返回的對象中添加空的。
承接上文《React Native 基礎練習指北(一)》,我們來看看React Native如果通過接口獲取線上數據并展示。
Tips: 如果使用cmd+R無法刷新效果,請檢查index.ios.js的權限設置。
一、展示單條數據通常我們會在require("react-native");后,寫好儲存API的變量(此處我們使用簡單的API做演示):
var REQUEST_URL = "http://platform.sina.com.cn/sports_all/client_api?app_key=3571367214&_sport_t_=football&_sport_s_=opta&_sport_a_=teamOrder&type=213&season=2015&format=json";
這里我們暫時使用新浪體育2015年中超聯賽信息的接口,可以得到中超16支球隊2015賽季的相關信息(未經授權,悄悄的使用,打槍的不要)。
接下來,我們要添加一些初始化的狀態,我們可以通過this.state.movies === null判斷數據是否已經成功加載。將下面的代碼加在render方法前面:
getInitialState: function() { return { teams: null, }; },
當react-native組件加載完成后,我們需要發送我們的請求。React會在react-native組件加載完成后,使用componentDidMount方法發送請求,并且只發送一次。
componentDidMount: function() { this.fetchData(); },
下面,我們需要添加fetchData方法,它是用來取回數據的。在React的工作流程中,setState會觸發一次重繪,隨后render方法會發現this.state.movies不再是null,你所需要做的就是使用this.setState({movies: data})。牢記在最后要使用done(),否則不會出現錯誤提示。
fetchData: function() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { this.setState({ teams: responseData.result.data, }); }) .done(); },
現在,我們需要修改render方法,從而當我們沒有拿到數據時,渲染出一個loading視圖,隨后呈現出第一個球隊信息。
render: function() { if (!this.state.teams) { return this.renderLoadingView(); } var team = this.state.teams[11]; return this.renderTeam(team); }, renderLoadingView: function() { return (); }, renderTeam: function(team) { return ( Loading teams... ); } {team.team_cn} {team.team_order}
現在,在iOS模擬器中cmd+R,在請求拿到返回數據之前,你會看到“Loading teams...”,隨后會渲染出第一個球隊信息。
二、展示數據列表下面我們來看看如何把所有數據展示在ListView組件中,而不是僅僅展示一條數據。
首先我們在最上面定義React的時候加入ListView:
var { AppRegistry, Image, ListView, StyleSheet, Text, View } = React;
接下來,我修改render方法,從而能夠以列表方式展示出數據:
render: function() { if (!this.state.loaded) { return this.renderLoadingView(); } return (); },
ListView可以判斷哪些數據發生了改變,并在數據更新時,體現在列表中。
我們不難發現,我們使用了this.state中的dataSource。下一步在getInitialState返回的對象中添加空的dataSource。隨后,我們講數據存到dataSource中,我不再使用this.state.movies來避免數據重復加載,而是使用布爾值this.state.loaded來判斷數據是否成功獲取。
getInitialState: function() { return { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), loaded: false, }; },
下面是完善后的fetchData方法:
fetchData: function() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData.result.data), loaded: true, }); }) .done(); },
最后,我們把ListView的樣式添加到styles對象中:
listView: { paddingTop: 20, backgroundColor: "#F5FCFF", },
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/85615.html
摘要:圍觀本文需自備,,以及。使用打開,并點擊,會看到模擬器以及此項目對應的內容,效果如下如果想要修改顯示內容,請打開,里面是一堆模樣的東西。接下來,我們按照教程,來展示一張電影海報,為了方便,我們直接修改。 原文鏈接:http://www.tinghaige.com/ 本著什么都要攙和的原則,一起來看看React Native是如何開發iOS APP。 圍觀本文需自備Mac OSX ,...
摘要:指北詳談解構賦值附贈練習題一何謂解構賦值基本概念首先我們看一下給的定義解構賦值語法是一個表達式,這使得可以將值從數組或屬性從對象提取到不同的變量中從定義中,我們可以發現解構賦值的作用是對變量進行賦值主要通過兩個方面實現這個作用數組將數組中的 ES6指北【6】——詳談解構賦值【附贈練習題】 一、何謂解構賦值? 1. 基本概念 首先我們看一下MDN給的定義 解構賦值語法是一個 Javasc...
摘要:簡單來說,就是一個可以將動畫轉成可運行在上的插件。使用工具使用前請確保已安裝這以下工具。更詳細內容可參考官網庫最后再分項目框架提供兩個的庫 簡介 Lottie 是 Airbnb 開源的一套跨平臺的完整的動畫效果解決方案,設計師可以使用 Adobe After Effects 設計出漂亮的動畫之后,使用 Lottic 提供的 Bodymovin 插件將設計好的動畫導出成 JSON 格式,...
摘要:前端日報精選源碼解析一組件的實現與掛載寫在的前端數據層不完全指北非時圓角邊框剪裁問題專題之解讀排序源碼中的閉包再也不用擔心面試被問什么是閉包了中文路由路由基礎入門實戰操作詳細指南前端學習教程用實現一門編程語言語言簡介眾成翻譯第 2017-10-19 前端日報 精選 React源碼解析(一):組件的實現與掛載寫在2017的前端數據層不完全指北Chrome opacity非1時border...
摘要:本文主要介紹下中的主要操作。所謂的內存屏障,是之虛擬機在對于這樣的語句,在及后續寫入操作執行前,保證的寫入操作對其它處理器可見。是會插入的內存屏障,效率略低本篇為俺的課堂基礎手寫的前置知識,歡迎大家圍觀 Unsafe是Java無鎖操作的基石,在無鎖并發類中都少不了它們的身影,比如ConcurrentHashMap, ConcurrentLinkedQueue, 都是由Unsafe類來實...
閱讀 967·2021-11-24 09:39
閱讀 3396·2021-10-27 14:20
閱讀 2326·2019-08-30 14:08
閱讀 3368·2019-08-29 16:34
閱讀 2182·2019-08-26 12:14
閱讀 2110·2019-08-26 11:54
閱讀 2779·2019-08-26 11:44
閱讀 2480·2019-08-26 11:38