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/[e-mail]')} 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',width:Dimensions.get('window').width-60,arrow:{
        width:28,top:18,resizeMode:Image.resizeMode.contain
    }
});