react native 实现动态高度Listview 和图文混排

当考虑这个动态高度和图文混排的问题,想必你已经知道如何加载ListView和分组listview,这里不再赘述...

这里简介实现的动态的高度的cell的思路

 
 
写一个ListView,准好数据源
在renderRow中渲染自定义的item
在item 中布局text 和image
在text 中实现
    onLayout={this._onTextLayout.bind(this)}
 5._onTextLayout 获得文本的高度,根据这个高度改变用ref标记的相关组件,包括text,image等等

export default class Item extends Component{


    _onTextLayout(event){

        let descHeight= event.nativeEvent.layout.height;
       totalHeight=descHeight+30>60?descHeight+45:60

        this.refs.item.setNativeProps({
            style:{
                width:Dimensions.get('window').width,
                height:totalHeight,
                backgroundColor:"white"
            }
        });
        this.refs.nextIcon.setNativeProps({
            style:{
                width:28,
                height:28,
                position:'absolute',
                left:Dimensions.get('window').width-35,
                top:totalHeight/2-12,
                resizeMode:Image.resizeMode.contain
            }
        });
    }

    render(){

        var row =this.props.row;
        return(
           <TouchableOpacity style={[styles.direction]} {...this.props}>
              <View ref="item" style={styles.item}>
                  <Text style={styles.title} >{row.title}</Text>
                  <Text style={styles.detailTitle} onLayout={this._onTextLayout.bind(this)}  >>{row.detail}</Text>
                  <Image ref="nextIcon" source={require('../../image/next@2x.png')} style={styles.arrow}/>
              </View>
           </TouchableOpacity>
        );
    }
}

const styles= StyleSheet.create({


    direction:{
       flexDirection:'column',
        borderTopWidth:1,
        borderTopColor:'#cccccc',
    },

    item:{
        width:Dimensions.get('window').width,
        height:60,
        backgroundColor:"white"
    },
    title: {
          top:10,
         fontSize:14,
        left:14,
        color:'#363636',
        backgroundColor:'transparent',
    },
    detailTitle: {
        top:16,
        fontSize:12,
        color:'#999999',
        left:14,
        width:Dimensions.get('window').width-60,
        backgroundColor:'transparent',
    },

    arrow:{
        width:28,
        height:28,
        position:'absolute',
        left:Dimensions.get('window').width-35,
        top:18,
        resizeMode:Image.resizeMode.contain
    }
});