React-Native 导航选项给出错误答案

【问题标题】：React-Native navigation options gives errorReact-Native 导航选项给出错误
【发布时间】：2018-05-16 05:41:22
【问题描述】：

在我的 react-native 应用程序中，它给了我一个错误，当我尝试设置 this.props.navigation.setParams({});

这个错误的原因是什么？

 import React, { Component } from "react";
import { View, Text, ScrollView, StyleSheet } from "react-native";

import { bindActionCreators } from "redux";
import { connect } from "react-redux";

import {
  Workout,
  WorkoutDetail,
  KeyValueText,
  DetailText
} from "../../components";
import { getWorkout } from "../../actions";

class WorkoutDetailScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentWorkout: {}
    };
  }

  componentDidMount() {
    const workoutId = this.props.navigation.state.params;
    this.props.getWorkout(workoutId);

    this.props.navigation.setParams({}); // If I remove this line, the error goes. But I want to set params here.
  }

  render() {
    let currentWorkout = this.props.currentWorkout;
    let tools =
      currentWorkout.tools && currentWorkout.tools.length > 0
        ? currentWorkout.tools.join(", ")
        : "Not Required";
    let muscles = currentWorkout.muscles
      ? currentWorkout.muscles.join(", ")
      : "";

    return (
      <ScrollView style={styles.container}>
        <WorkoutDetail
          workout={this.props.currentWorkout}
          workoutImage={currentWorkout.workoutImage}
          onPressWorkout={() => alert("CONTINUE WORKOUT")}
        />

        <View style={styles.workoutInfo}>
          <KeyValueText header="Time" value={currentWorkout.length} />
          <KeyValueText header="Difficulty" value={currentWorkout.difficulty} />
          <KeyValueText header="Tools" value={tools} />
          <KeyValueText header="Muscles" value={muscles} />
        </View>

        <View>
          <DetailText text={currentWorkout.description} />
        </View>
      </ScrollView>
    );
  }

  // navigation options
  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;

    return {
      headerTitle: "TITLE",
      headerTitleStyle: {
        width: "100%",
        alignItems: "center"
      },
      headerStyle: {
        paddingRight: 10,
        paddingLeft: 10
      }
    };
  };
}

// styles
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  workoutInfo: {
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: "gray"
  }
});

const mapStateToProps = state => {
  return {
    currentWorkout: state.workouts.currentWorkout
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getWorkout: bindActionCreators(getWorkout, dispatch)
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(
  WorkoutDetailScreen
);

【问题讨论】：

标签： react-native

【解决方案1】：

这可能是因为您在 setParams 调用中使用了一个空对象。 React 导航然后可能使用 Object.assign 来设置你的导航参数，它会命中this error

尝试通过提供表示初始状态的对象而不是空对象来重置导航参数。

【讨论】：