listview
元件用於顯示乙個垂直的滾動列表,其中的元素之間結構近似而僅資料不同。
listview
更適於長列表資料,且元素個數可以增刪。和scrollview
不同的是,listview
並不立即渲染所有元素,而是優先渲染螢幕上可見的元素。
listview
元件必須的兩個屬性是datasource
和renderrow
。datasource
是列表的資料來源,而renderrow
則逐個解析資料來源中的資料,然後返回乙個設定好格式的元件來渲染。
下面的例子建立了乙個簡單的listview
,並預設了一些模擬資料。首先是初始化listview
所需的datasource
,其中的每一項(行)資料之後都在renderrow
中被渲染成了text
元件,最後構成整個listview
。
rowhaschanged
函式也是listview
的必需屬性。這裡我們只是簡單的比較兩行資料是否是同乙個資料(===符號只比較基本型別資料的值,和引用型別的位址)來判斷某行資料是否變化了。
import react, from
'react';
'react-native';
class
listviewbasics
extends
component
); this.state = ;
} render() }>
datasource=
renderrow=text>}
/>
view>
);}}
// 註冊應用(registercomponent)後才能正確渲染
// 注意:只把應用作為乙個整體註冊一次,而不是每個元件/模組都註冊
listview
的乙個常用場景就是從伺服器端取回列表資料然後顯示,要實現這一過程,你可能還需要學習react native的網路相關用法. React Native控制項之Text元件介紹
基本用法 text元件是react中的乙個基本元件,這個和ios上的uilabel與android上的textview元件相類似,就是用來顯示文字的,這個空間除了基本的顯示布局之外,可以巢狀使用,設定樣式,新增事件處理功能。下面我們給出乙個簡答的例子 use strict import react,...
React native 無法彈出除錯控制項的問題
react native 在debug模式下,可以通過搖動手機,彈出除錯選項。但是今天利用了cocoapods 把react native 檔案整理後,除錯介面就彈不出了,其他功能正常。查了好久,發現是少在pods的 spec裡寫了devsupport 這個模組。下面發乙份pods 的 spec 檔...
React Native 之布局篇
一.flex布局 什麼是flex布局?布局的傳統解決方案,是基於盒子模型,依賴display屬性 position屬性 float屬性,這種布局方式對於特殊布局非常不方便,比如,垂直居中就不好實現.2009年,w3c提出的flex布局,即彈性布局,用來為盒子模型提供最大的靈活性,任何乙個容器都可以指...