iOS UITableView tableHeaderView 高度变了

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iOS UITableView tableHeaderView 高度变了相关的知识,希望对你有一定的参考价值。

参考技术A 后面发现就是 XIB 中 View 多套了一层 View, 然后 UITableView 在重新根据约束变化时,高度设置变了

背景:用 XIB 当做 tableHeaderView 的,高度明明设置了 200,结果呈现了 254。

发现 XIB 中View 层次不一样,XIB 主View 套一个 View,再套 subViews 的层次。

React几种函数的写法

// 写法一
export default class App extends React.Component {
    tableHeader = () => {};
}
// 写法二
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.tableHeader = this.tableHeader.bind(this);
    }
    tableHeader() {
    };
}
// 写法三
export default class App extends React.Component {

    tableHeader() {
    };
}
// 写法四
class  App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick= ()=>{
  }
  render() {
    return (
      <button onClick={this.handleClick}>点击</button>
    );
  }
}
// 写法五
export default class App extends React.Component {
    handleClick() {
    };
    render(){
        return (
        <button onClick={()=> {this.handleClick();}}>点击</button>
        );
    }
}

分析

主要是函数内this指向不同

第一种写法还不是js标准,但是babel已经支持了。相当于让tableHeader的值为一个箭头函数,而箭头函数的特性我们都知道:它内部没有this,它会使用定义时的this,这里this就会指向这个类的实例。

第二种写法它的目的和第一种是一样的,让函数内部的this指向这个类的实例,它是用bind实现的,bind的第一个参数表示context,就是this。

第三种写法就是普通的写法,之所以会有前面两种写法,就是因为第三种写法可能会出问题。

举个简单的例子,按第三种方式写:

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? ‘ON‘ : ‘OFF‘}
      </button>
    );
  }
}

这段代码实际上是不能工作的,因为handleClick内部用到了this.setState,而handleClick执行时,this是undefined

如果想要它工作,可以改成前两种的写法,或者这样改:

  render() {
    return (
      <button onClick={ ()=>{ this.handleClick() } }>
        {this.state.isToggleOn ? ‘ON‘ : ‘OFF‘}
      </button>
    );
  }

用一个箭头函数将其包裹住

以上是关于iOS UITableView tableHeaderView 高度变了的主要内容,如果未能解决你的问题,请参考以下文章

如何在 jQuery 导出时将 dataTables 中的所有 tableHeader 值更改为大写

使用 tableHeader TVOS 重新加载 tableView 时断言失败

React几种函数的写法

当antd Table Head高度不确定,动态计算满屏时Table scroll y的高度。

IOS-UITableView入门

iOS 编辑UITableView(根据iOS编程编写)