Michael_Jheng的部落格

接續[React-Native教學筆記]<ListView>列表顯示之一,介紹ListView進階用法,如下所示,

<ListView>在React Native中是個非常重要的組件,創立最簡單的API"ListView.DataSource",同時給該對像傳入一個簡單的數據集合,並且使用數據源"data source"實例化一個ListView組件,定義一個renderRow回調方法,該renderRow方法會返回一個可顯示的組件,並以列表的方式呈現每一個item

React Native提供一套用於顯示數據列表工具,可用方法有FlatList與SectionList,這裡介紹SectionList,SectionList可以將各個資料做分類顯示,主要用到分類標題顯示renderSectionHeader與資料顯示renderItem,程式寫法如下:

React Native提供一套用於顯示數據列表工具,可用方法有FlatList與SectionList,這裡先介紹FlatList,FlatList需要用到data和renderItem這兩工具,data是列表資料來源,renderItem獲取一個資料，並返回一個格式化後的資料進行顯示,程式寫法如下:

ScrollView為滾動功能,可以進行垂直與水平滾動,垂直滾動為預設功能,水平可藉由horizontal屬性來完成,這裡先示範水平滾動功能,首先介紹ScrollView為這次標籤,如下所示,

ScrollView為滾動功能,可以進行垂直與水平滾動,垂直滾動為預設功能,水平可藉由horizontal屬性來完成,這裡先示範垂直滾動功能,首先介紹ScrollView為這次標籤,如下所示,

onPressIn與onPressOut分別是開始點擊與點擊結束,按住不放就會執行onPressIn裡的方法,只要放手就會執行onPressOut裡的方法,

disabled是Touchable系列中最常使用的屬性,通常用於禁止按鈕觸發點擊事件,方法如下,

如果在處理觸控事件時不要顯示任何視覺反饋,使用TouchableWithoutFeedback是個不錯的選擇,下面介紹TouchableWithoutFeedback之方法

TouchableOpacity在觸控後會使物件變透明,在撰寫時可以設定透明度,首先介紹TouchableOpacity為這次觸控標籤,如下所示,

介紹TouchableHighlight可以使用的方法,

TouchableHighlight是當觸發時,可顯示出底色,而要使圖片能有觸發效果,可以使用<TouchableHighlight>來完成,首先在解構指派增加 Alert ,Image與TouchableHighlight, Alert 為彈出視窗,Image為圖片,TouchableHighlight為這次觸控標籤,如下所示,

智慧手機可讓用戶使用手指做到點擊按鈕,滾動列表,放大地圖,這裡先介紹點擊按鈕,程式方面首先在解構指派增加 Alert 與Button, Alert 為彈出視窗,Button為按鈕,如下所示,

文字輸入在解構指派需增加TextInput,如下程式,

flexbox可指定子類別的怖局,通常是使用flexDirection，alignItems以及justifyContent來實現正確佈局

使用flex組件之style,可根據可用空間大小動態調整,使用flex: 1設置組件填充所有空間,在此父類別下每個子類別組件之間將平均分配,空間分配採用比例分配,子類別比例越高空間越大,如果子類別為0(flex: 0),將不會分配

設置組件尺寸最簡單的方法是添加width與height之固定尺寸

使用React Native,就不需要使用特殊語言或語法來定義樣式,樣式名稱與參數值跟CSS相同,所有的核心組件都接受一個名稱為style,CSS名稱要用camel方式撰寫,例如CSS中文字大小font-size,改寫成camel方式為fontSize

props和state是資料控制組件,props為父類別, 在組件內都的生命週期為固定,要更改資料就必須使用state,正常來說,state在構造函數中初始化後,在要更改資料的地方使用setState

自定義組件使用props,製作一個可以在應用程式之不同位置使用的組件,每個組件的屬性略有不同,這裡只演示this.props在render的功能,