export default class Item extends Component {
    static defaultProps =  {
        title:'',text:'',itemCount:0,titleStyle:View.propTypes.style,textStyle:View.propTypes.style,viewStyle:View.propTypes.style,callBackItemHeight:PropTypes.func
    }
    static propTypes ={
        title:PropTypes.string,text:PropTypes.string,itemCount:PropTypes.number,titleStyle:Text.propTypes.style,textStyle:Text.propTypes.style,callBackItemHeight:PropTypes.func
    }
    constructor(props) {
        super(props);
        this.titleHeight=0;
        this.textHeight=0;
        this.state={
            itemHeight:40
        }
    }
    _titleLayout(event) {
        this.titleHeight=event.nativeEvent.layout.height
       // this.getItemHeight(this.titleHeight,this.textHeight)
    }
    _textLayout(event) {
        this.textHeight=event.nativeEvent.layout.height
        this.getItemHeight(this.titleHeight,this.textHeight)
    }
    getItemHeight(titleHeight,textHeight){
        let maxHeight=titleHeight>textHeight?titleHeight:textHeight
        this.setState({
            itemHeight:maxHeight
        })
        if(this.props.callBackItemHeight){
            this.props.callBackItemHeight(maxHeight)
        }
        this.refs.title.setNativeProps({
            style:{
                top:(this.state.itemHeight-titleHeight)/2,left:16,width:134,backgroundColor:'transparent',height:titleHeight,justifyContent:'center'
            }
        });
        this.refs.text.setNativeProps({
            style:{
                left:10,top:(this.state.itemHeight-textHeight)/2,width:Globle.window.width-170,height:textHeight,justifyContent:'center'
            }
        });
        this.refs.seperate.setNativeProps({
            style:{
               position:'absolute',width:Globle.window.width-16,height:1,backgroundColor:'#1a1a1a',top:this.state.itemHeight-1
            }
        })
    }
    render (){
        let container={height:this.state.itemHeight}
        return(
            <View style={[styles.item,container]}>
                <View ref="title">
                <Text   style={{color:'#666666'}} onLayout={this._titleLayout.bind(this)}>
                    {this.props.title}
                </Text>
                    </View>
                <View ref="text">
                <Text   style={{color:'#000000'}} onLayout={this._textLayout.bind(this)}>
                    {this.props.text}
                </Text>
                </View>
                <View ref="seperate"></View>
            </View>
        )
    }
}
const styles=StyleSheet.create({
    item:{
        flexDirection:'row'
    }
})

var heightArray=[]
var hh=0
export default class test extends Component {
     constructor(props) {
        super(props)
        this.state={
            dataSource:[],totalHeight:0
        }
    }
     componentWillMount(){
         this.setState({
             dataSource:[
                 {title: '范冰冰',text:"近日，第11届亚洲电影大奖在香港落幕，《我不是潘金莲》获得包括最佳电影、最佳摄影在内的三项大奖，范冰冰凭借该片拿下最佳女主角奖。范冰冰在领奖台上表示，这是送给冯小刚导演的生日礼物，“你是我伯乐，我是你福将”"},{title: '陈数',text:"2009年，凭借《倾城之恋》入围韩国首尔电视节，唯一一位亚洲女演员获 韩国首尔电视节最佳女演员提名。2011年，获得第十七届上海电视节白玉兰奖“最佳女演员”，2011年第六届华鼎奖“最佳女主角”，2012年凭借《铁梨花》荣获“金鹰奖“观众喜爱女演员”奖项"},{title: '胡歌',text:"2005年1月24日，主演的古装仙侠剧《仙剑奇侠传》播出，胡歌饰演豪爽深情的李逍遥，并演唱两首插曲《六月的雨》和《逍遥叹》 "},{title: '何塞·保罗·贝塞拉·马希尔·儒尼奥尔（José Paulo Bezerra Maciel Júnior），简称保利尼奥[1]  ，1988年7月25日出生于巴西圣保罗，巴西足球运动员。司职中前卫、后腰等。现效力于中国广州恒大淘宝足球俱乐部',text:"暴力鸟"}
             ]
         })
     }
     renderItem(data,i){
        return(<Item key={i}
                     title={data.title}
                     text={data.text}
                     itemCount={this.state.dataSource.length}
                     callBackItemHeight={(h)=>{
                     console.log("h===>"+h)
                       heightArray.push(h)
                       hh+=h
                   heightArray.sort().reverse()
                   for(let i=0;i<this.state.dataSource.length;i++){
                   hh+=heightArray[i]
                   }
                      this.setState({
                      totalHeight:hh
                      })
                      }
                     }
            />)
    }
  render() {
    return (
      <View >
          <View style={{backgroundColor:'white',top:0,height:this.state.totalHeight}}>
              {this.state.dataSource.map((data,i)=>this.renderItem(data,i))}
          </View>
      </View>
    );
  }
}

顶

0

踩

0