Question

我正在使用react-navigation进行路由。在一个组件上，我试图设置navigationOptions以显示汉堡包按钮以打开和关闭侧边栏（抽屉）。所以onPress我正在尝试为我的侧边栏标志设置状态，但它发出了错误_this2.setState is not a function人们建议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>
    )
  })
}

navigationOptions中的this.setState给出错误_this2.setState不是函数

2 个答案: