Undefined 不是 React Native 上的对象（评估“this.props.navigation.navigate”）答案

【问题标题】：Undefined is not an object (evaluating 'this.props.navigation.navigate') on React NativeUndefined 不是 React Native 上的对象（评估“this.props.navigation.navigate”）
【发布时间】：2020-06-29 02:38:05
【问题描述】：

我目前正在使用 Expo 开发我的第一个 react 本机项目，但在屏幕导航之间出现问题，我得到“未定义不是对象（评估 'this.props.navigation.navigate'）”。我想知道实际上是什么问题以及如何解决它。谢谢你。这是出现导航问题的屏幕代码：

import {
  StyleSheet,
  Text,
  View,
  Button,
  Date,
  KeyboardAvoidingView,
} from "react-native";
import t from "tcomb-form-native";
import moment from "moment";

const Form = t.form.Form;

const User = t.struct({
  Surname: t.String,
  Name: t.String,
  Birthday: t.Date,
});

const options = {
  fields: {
    Surname: {
      label: "Surname",
    },
    Name: {
      label: "Name",
    },
    Birthday: {
      mode: "date",
      label: "Birthday",
      config: {
        defaultValueText: "Click here to enter your birthday",
        format: (date) => {
          return moment(date).format("DD / MM / YYYY"); 
        },
      },
    },
  },
};

class Newform extends Component {
  render() {
    return (
      <KeyboardAvoidingView behavior="padding">
        <Text style={styles.setColorGreen} color="#8cba51">
          Informations
        </Text>
        <Form ref="form" type={User} options={options} />
        <Button
          onPress={() => this.props.navigation.navigate("Chat")}
          title="Next"
          color="#8cba51"
        />
      </KeyboardAvoidingView>
    );
  }
}

var styles = StyleSheet.create({
  setColorGreen: {
    color: "#8cba51",
    alignItems: "center",
    justifyContent: "center",
    padding: 20,
    fontWeight: "bold",
    textAlign: "center",
    fontSize: 20,
  },
});

export default Newform; ```

【问题讨论】：

标签： javascript react-native navigation undefined react-navigation

【解决方案1】：

您可能不会将此组件作为屏幕组件传递。您能否分享您的 Navigator 或分享包含此组件的更高级别的组件？导航器应如下所示：

<Stack.Navigator>
  <Stack.Screen name="NewForm" component={NewForm} />
<Stack.Navigator>

或者如果你在屏幕组件中使用这个组件，你应该像这样将导航道具传递给子组件

// Stack Navigator
<Stack.Navigator>
  <Stack.Screen name="NewForm" component={FormScreen} />
<Stack.Navigator>

class FormScreen extends Component {
  render() {
    return (
      <NewForm {...this.props} />
    );
  }
}

【讨论】：