react native 仿微信朋友圈的评论自动定位

react native 仿微信朋友圈的评论自动定位

constructor(props) {    //es6 构造方法
        super(props);
        this.rowlayouts=[]; 
        this.scrollview = null;
        this.scrollview1 = null;   
        this.state = {
     
        };
    }

componentWillMount () {  //将要加载控件
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow',                             this._keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide',                             this._keyboardDidHide.bind(this));
 }

  componentWillUnmount () { //将要销毁控件
      this.keyboardDidShowListener.remove();
      this.keyboardDidHideListener.remove();
  }

  _keyboardDidShow (e) {  //当键盘弹出的时候要做的事
     this.key=e.startCoordinates.height    //拿到的值就是键盘的高度

       UIManager.measureInWindow(   //当前listview在屏幕的位置
                React.findNodeHandle(that.scrollview1),
                (sx, sy, sw, sh) => {
                    var showIndex = 19;   //listview 里面item的个数
                    var itemHeight = 0;
                    for (var i = 0; i <= showIndex; ++i) {
                        if (that.rowlayouts[i]) {
                            itemHeight += that.rowlayouts[i].height;
                        }
                    }
                    // 36是输入框的高度
                    var offset = Dimensions.get('window').height - sy - this.key-36;
                    var newpos = itemHeight - offset;
                    that.scrollview.scrollTo({x: 0, y: newpos});
                });
                    var newpos = itemHeight - offset;
                    that.scrollview.scrollTo({x: 0, y: newpos});
                });

}

  _keyboardDidHide (e) {   //当键盘收缩的时候要做的事
    alert('Keyboard Hidden');
  }

 
 componentDidMount() {
       
    }


<ListView              
                 dataSource={this.state.ds1}   //数据源，你可以自己定
                 renderRow={this._renderRow12.bind(this)}   //单个的item
                 ref={(r) => this.scrollview1 = r}         //   当控件被创建后将ScrollView这个对象的引用就传给了                                                                                             this.scrollview1 这个变量 
/>


_renderRow12(rowData, sectionID, rowID){
      return(
         <TouchableOpacity
             onLayout={(e) => this.rowlayouts[rowID] = e.nativeEvent.layout}      //得到每一个一个对象数组（每个                                                                                                                         对象里面包含当前对象组件的度）
             style={styles.column}
         />

      ）

｝