ReactNative学习笔记2

一、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('要传递的参数')
}