在 react-native 中显示/隐藏状态更改的组件时出错

Question

我正在尝试在我的 react 本机应用程序中选择性地显示/隐藏一个组件。我正在使用的代码的精简版受到Hide/Show components in react native 的启发。代码如下：

'use strict';
var React = require('react-native');
var {
  Text,
  Navigator,
} = React;


class SomePage extends Component {

  constructor(props) {
    super(props);
    this.state = {
      showView : true,
    };
  }

  render() {
    return (
      <Navigator
          renderScene={this.renderScene.bind(this)}
      />
    );
  }

  testRender()
  {
    return (
      <Text>ShowView: {this.showView}</Text>
        )
  }

  renderScene(route, navigator) {
    if (this.state.showView){
      return ({this.testRender.bind(this)})
    }
    else
    {
      return (<Text>ShowView: {this.showView}</Text>)
    }
  }
}

不幸的是，该代码无法正常工作，并在

上引发“意外令牌错误”

return ({this.testRender.bind(this)})

如果我把这一行写成

return (this.testRender.bind(this))

错误消失了，但我只是得到一个空白屏幕。知道我在这里做错了什么吗？

Answer 1

bind 在这里不是正确的方法。您需要调用该函数。

  renderScene(route, navigator) {
    if (this.state.showView){
      return this.testRender();
    }
    else
    {
      return (<Text>ShowView: {this.showView}</Text>)
    }
  }