Question

我在项目中使用了反应导航，并且需要在右标题按钮单击上切换模式。当我将setState设置为true时，我将无法定义。

代码：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { ToggleDrawer, ToggleAdditional } from '../../utils';
import { AdditionalModal } from '../../components';

class Settings extends Component {
  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
      headerTitle: 'Profile',
      headerLeft: <ToggleDrawer pressHandler={() => navigation.openDrawer()} />,
      headerRight: (
        <ToggleAdditional pressHandler={() => params.handleAdditionalModal()} />
      )
    };
  };

  constructor(props) {
    super(props);

    this.state = {
      modalIsVisible: false
    };
  }

  componentDidMount() {
    const { navigation } = this.props;

    navigation.setParams({
      handleAdditionalModal: this.toggleAdditionalModal
    });
  }

  toggleAdditionalModal() {
    this.setState({
      modalIsVisible: true
    });
  }

  render() {
    const { modalIsVisible } = this.state;

    return (
      <View>
        <Text>Settings</Text>
        <AdditionalModal isVisible={modalIsVisible} />
      </View>
    );
  }
}

export default Settings;

我在做什么错？在react-navigation标头中处理此类点击事件的最佳方法是什么？

谢谢！

Answer 1

尝试对SQL Error: ORA-00936: missing expression 00936. 00000 - "missing expression" *Cause: *Action:使用箭头功能

toggleAdditionalModal

您需要箭头功能，因为您要访问toggleAdditionalModal = () =>{ this.setState({ modalIsVisible: true }); }属性，该属性引用当前类。

箭头函数意味着this不会引用函数的上下文，而是引用类的上下文。

React Navigation header onPress-this.setState不是一个函数

1 个答案: