当考虑这个动态高度和图文混排的问题,想必你已经知道如何加载ListView和分组listview,这里不再赘述...
这里简介实现的动态的高度的cell的思路
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',width:Dimensions.get('window').width-60,arrow:{ width:28,top:18,resizeMode:Image.resizeMode.contain } });
原文地址:https://www.jb51.cc/react/305080.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。