react-native - navigationOptions 内的 this.setState 给出错误 _this2.setState 不是函数

Question

我正在使用 react-navigation 进行路由。在一个组件上，我尝试设置 navigationOptions 以显示汉堡包按钮以打开和关闭侧边栏(抽屉)。所以 onPress 我试图为我的侧边栏标志设置 State，但它给出了错误 _this2.setState 不是一个函数 人们建议 bind 但我认为不会跟着我的场景走吧。这是代码。

static navigationOptions = ({ navigation, screenProps }) => ({
        headerLeft: 
            <TouchableOpacity
                onPress={() => { this.setState({ Sidebar: true }); }}
            >
            <Image 
                source={{ uri: 'https://rsna2015.rsna.org/images/hamburger-stale.png' }}
                style={{ height: 35, width: 35, marginLeft: 10 }} />
            </TouchableOpacity>
});

Answer 1

就是这样，预期的行为。

静态方法调用是在类上进行的，而不是在实例上进行的。无法在静态方法中引用 this。

撰写关于以清晰、声明性方式解决此问题的机制的文章，不幸的是，尚未准备好。

暂时的“肮脏”(势在必行)解决方案是......

static navigationOptions = ({ navigation, screenProps }) => ({
  headerLeft: navigation.state.params ? navigation.state.params.headerLeft : null
});

componentDidMount() {
  // Set route params
  this.navigation.setParams({
    headerLeft: (
      <TouchableOpacity
        onPress={() => { this.setState({ Sidebar: true }); }}
      >
        <Image 
          source={{ uri: 'https://rsna2015.rsna.org/images/hamburger-stale.png' }}
          style={{ height: 35, width: 35, marginLeft: 10 }}
        />
      </TouchableOpacity>
    )
  })
}