React Native中navigationOptions无法调用changeVisibilityFilterModal问题求助

你碰到的undefined is not a function报错，核心原因是**navigationOptions是类的静态属性**，它的作用域绑定在类本身，而非组件实例上——所以这里的this根本指向不到你的组件实例，自然找不到changeVisibilityFilterModal方法。另外还要提一句：你原代码里的changeVisibilityFilterModal方法，setState前面漏写了this.，这个小细节也要补上，不然也会报错。

下面给你两种靠谱的解决方案：

方案一：使用navigation.setParams传递实例方法 #

这是React Navigation类组件场景下最常用的解决方式，步骤清晰且符合框架设计思路：

1. 在组件挂载时，把实例方法绑定并传递给navigation参数：

componentDidMount() {
  // 绑定this后，将方法存入navigation的参数集合
  this.props.navigation.setParams({
    toggleFilterModal: this.changeVisibilityFilterModal.bind(this)
  });
}

2. 修改navigationOptions为函数形式，通过navigation.getParam获取传递的方法：

static navigationOptions = ({ navigation }) => ({
  headerTitle: 'Screws', 
  title: 'Screws', 
  headerRight: (
    <TouchableOpacity 
      onPress={() => {
        // 调用从实例传递过来的方法
        navigation.getParam('toggleFilterModal')(true);
      }}
    > 
      <Image style={{marginRight:10}} source={require('../../assets/img/icFilter.png')}/> 
    </TouchableOpacity>
  ), 
});

3. 修正changeVisibilityFilterModal里的setState调用：

changeVisibilityFilterModal(visibility){ 
  this.setState({filterModalVisible: visibility}); 
}

方案二：用箭头函数绑定实例方法（可选） #

如果不想用setParams，也可以把方法定义为箭头函数，让它自动绑定组件实例的this，不过这种方式需要额外处理navigationOptions的上下文关联，不如方案一直观：

// 箭头函数自动绑定组件实例的this
changeVisibilityFilterModal = (visibility) => {
  this.setState({filterModalVisible: visibility});
}

// 后续需要通过navigation的state或其他方式关联到组件实例，更推荐优先用方案一

总结一下，方案一最稳妥且容易维护，按照步骤修改后就能解决你当前的报错问题。

内容的提问来源于stack exchange，提问作者Mizlul