一、Flexbox布局
1.容器屬性
（1）flexDirection
- row 水平布局
- column 豎直布局（默認方式）
（2）flexWrap
決定其子元素沿著軸線的排列成一行或者空間不夠后自動換行
- nowrap 不自動換行（默認方式）
- wrap 自動換行
（3）justifyContent
決定其子元素沿著主軸的排列方式
- flex-start
- center
- flex-end
- space-around
- space-between
（4）align-items
決定其子元素沿著交叉軸的排列方式
- flex-start
- flex-end
- center
- baseline
- stretch
2.元素屬性
（1）alignSelf
允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。
- auto （默認方式）
- flex-start
- center
- flex-end
- stretch
（2）圖片
- contain
- cover
- stretch
(3)定位（相對定位和絕對定位）
和top、left配合使用
- absolute
- relative
（4）text
Text之間存在屬性繼承
- textAlign enum("auto", 'left', 'right', 'center')
- lineHeight number
- writingDirection enum("auto", 'ltr', 'rtl')
- numberOfLines number（ 需要放在最外層的Text元素上，且雖然截取了文字但是還是會占用空間）
3.公共屬性
（1）flex
權重，類似安卓布局中的layout_weight屬性。
(2) 盒子模型（margin和padding）
和Android、css中一樣
二、ListView-多個布局樣式
1.數據結構
目前支持如下的數據結構
- { sectionID_1: { rowID_1: rowData1, ... }, ... }
- { sectionID_1: [ rowData1, rowData2, ... ], ... }
- [ [ rowData1, rowData2, ... ], ... ]
大多數情況下我們會用到第二種（字典套數組）和第三種（純數組），每一個數組對應的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={
sectionWithTitle:[
{
title:'精選菜單',
pic:'http://image.hongbeibang.com/FjigYOhuPOLLS6M4F5ejd6psqCcI?801X312&imageMogr2/strip/thumbnail/750x750'
},
{
title:'熱門菜單',
pic:'http://image.hongbeibang.com/Fof924bIoB1hqE2MTs38bBcGEzk3?802X313&imageMogr2/strip/thumbnail/750x750'
}
],
sectionWithoutTitle:[
{
pic:'http://image.hongbeibang.com/FqBRH1E0EP2I488s7DXww1RVGQOF?801X311&imageMogr2/strip/thumbnail/750x750'
},
{
pic:'http://image.hongbeibang.com/FulhGNdLtEmHKTKkLX0cLjlH9Wxi?802X312&imageMogr2/strip/thumbnail/750x750'
},
{
pic:'http://image.hongbeibang.com/FkC4ySvlw9--96qkfJfFNeG9AgMa?800X313&imageMogr2/strip/thumbnail/750x750'
}
]
};
//構造方法
constructor(props){
super(props);
const ds = new ListView.DataSource(
{
rowHasChanged:(r1,r2)=>r1!==r2,//判斷不同item行是否相同
sectionHeaderHasChanged:(s1,s2)=>s1!==s2//不同之處，還應判斷section是否相同
});
this.state={
dataSource:ds,
isLoaded:false
}
}
//渲染方法
render() {
if(!this.state.isLoaded){
return this.renderLoading()
}
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData,sectionId,rowId)=>this.renderSections(rowData,rowId,sectionId)}//注意不同之處。可以拿到sectId
/>
);
}
//更新數據
componentDidMount(){
var that = this;
var change =function () {
that.setState({
dataSource:that.state.dataSource.cloneWithRowsAndSections(datas),//注意調用方法的差別
isLoaded:true
})
};
setTimeout(change,1000);
}
三、封裝獨立組件
父組件向子組件傳值方式：props（上一篇文章已總結過）
子組件向父組件傳值
- 1.EventEmitter
簡單的觀察者模式。發送端發送通知，接收端接受到通知后，通過狀態機來改變渲染。發送端和接受端同時需要引入DeviceEventEmitter組件。
代碼示例：
//父組件
DeviceEventEmitter.addListener("監聽事件名",(來自子組件的參數1，來自子組件的參數2,...)=>{
//父組件收到數據后進行操作
})
//子組件
DeviceEventEmitter.emit("監聽事件名",傳遞給父組件的參數1，傳遞給父子組件的參數2,...)
- 2.callback
代碼示例：
//第一個頁面
ToNextView(){
this.props.navigator.push({
component:NextView,
passProps:{
callback:((接受的參數)=>{
this.seedToSecond(接受的參數)
})
}
})
}
//第二個頁面
popToHome(){
this.props.navigatior.pop();
this.props.callback('要傳遞的參數')
}
