當考慮這個動態高度和圖文混排的問題,想必你已經知道如何載入ListView和分組listview,這裡不再贅述...

這裡簡介實現的動態的高度的cell的思路

1. 寫一個ListView,準好資料來源
2. 在renderRow中渲染自定義的item
3. 在item 中佈局text 和image
4. 在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/
 
[email protected]')} 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
    }
});