ReactNative學習筆記2

2021-09-11 14:23:36 字數 1725 閱讀 1020

1.容器屬性

(1)flexdirection

(2)flexwrap

決定其子元素沿著軸線的排列成一行或者空間不夠後自動換行

(3)justifycontent

決定其子元素沿著主軸的排列方式

(4)align-items

決定其子元素沿著交叉軸的排列方式

2.元素屬性

#####(1)alignself 允許單個專案有與其他專案不一樣的對齊方式,可覆蓋align-items屬性。

(2)(3)定位(相對定位和絕對定位)

和top、left配合使用

(4)text

text之間存在屬性繼承

3.公共屬性

#####(1)flex 權重,類似安卓布局中的layout_weight屬性。

(2) 盒子模型(margin和padding)

和android、css中一樣

1.資料結構

目前支援如下的資料結構

大多數情況下我們會用到第二種(字典套陣列)和第三種(純陣列),每乙個陣列對應的key系統會自動提取成sectionid。然後我們可以根據sectionid來判斷所載入的section。

如果是純陣列(無section),使用clonewithrows(datablob, rowidentities) 該方法接收兩個引數,datablob是原始資料源。在沒有section的時候使用此方法,傳入乙個陣列。rowidentities為可選型別,為資料來源的每一項指明乙個id。預設的id為字串'0','1','2'...datablob.count。

如果是字典套陣列的結構(有section),我們使用下面的方法為資料來源賦值。sectionidentities和rowidentities都是可選型別。 clonewithrowsandsections(datablob, sectionidentities, rowidentities)

**示例:

//資料結構

const datas=,

],sectionwithouttitle:[,,

]};//構造方法

constructor(props));

this.state=

}//渲染方法

render

() return (

this.rendersections(rowdata,rowid,sectionid)}//注意不同之處。可以拿到sectid

/>);}

//更新資料

componentdidmount

()) };

settimeout(change,1000);

}

複製**

子元件向父元件傳值

**示例:

//父元件

deviceeventemitter.addlistener("監聽事件名",(來自子元件的引數1,來自子元件的引數2,...)=>)

//子元件

deviceeventemitter.emit("監聽事件名",傳遞給父元件的引數1,傳遞給父子元件的引數2,...)

複製**

**示例:

//第乙個頁面

tonextview

()) }

})}//第二個頁面

poptohome

()複製**

react native學習筆記

react native專題 新建專案 react native init 專案名 執行專案 react native run android npm config set registry npm config set disturl var register require 在 工程目錄下的 v...

學習筆記 React Native

近期專案需要,使用 react native,ios 封裝好介面,js 呼叫介面獲取資料並在js 介面上展現。個人感覺還是比較方便,某些ui js做起來還是比較快的。但效率會稍微差些。不過 react native 的優點確實很多,例如 跨平台,動態載入,修改js介面後省去了編譯時間。由於剛剛接觸 ...

React Native 學習筆記

非常好的入門學習資料 由 lxykad分享 github popular開發教程,原始碼解析,專案總結 react native 問題及解決方案合集 react native 效能優化 react native 每日一學 每天乙個知識點 技巧,經驗,填坑日記等 每天學一點,離大神近一點。react ...