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}
/>
)
}