从具有Expo的组件进行反应导航

Question

我正在尝试从另一个主要从屏幕调用的组件内部使用React Navigation。层次结构：登录屏幕上有一个按钮组件，该按钮组件设计有TouchableOpacity组件，并且该登录按钮应该调用另一个屏幕，即Home。

login.js

import React, { Component } from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import { withNavigation } from 'react-navigation';
import CupertinoButtonSuccess from "../components/CupertinoButtonSuccess";
import CupertinoButtonWarning1 from "../components/CupertinoButtonWarning1";
import MaterialIconTextbox from "../components/MaterialIconTextbox";

//function Login(props) {
  export default class Login extends Component {
    static navigationOptions = {
      headerShown: false
    };

    render() {
  return (
    <View style={styles.container}>
      <Text style={styles.coMproTech1}>COMproTECH</Text>
      <View style={styles.rectStack}>
        <View style={styles.rect}>
          <CupertinoButtonSuccess
            Navigation={this.props.navigation}
            text1="Login"
            style={styles.cupertinoButtonSuccess}
          ></CupertinoButtonSuccess>
          <CupertinoButtonWarning1
            text1="Forgot Password"
            style={styles.cupertinoButtonWarning1}
          ></CupertinoButtonWarning1>
          <Button  title='test' onPress={this.handleClick}></Button>
        </View>
        <View style={styles.rect2}></View>
        <MaterialIconTextbox
          textInput1="Enter email"
          icon1Name="account"
          style={styles.materialIconTextbox}
        ></MaterialIconTextbox>
        <MaterialIconTextbox
          icon1Name="account-key"
          textInput1="Password"
          style={styles.materialIconTextbox2}
        ></MaterialIconTextbox>
      </View>
      <Text style={styles.services1}>Services</Text>
    </View>
  );
}
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "rgba(74,144,226,1)"
  },
  coMproTech1: {
    color: "rgba(247,242,242,1)",
    fontSize: 36,
    fontFamily: "Cochin-BoldItalic",
    marginTop: 110,
    marginLeft: 16
  },
  rect: {
    top: 19,
    left: 0,
    width: 342,
    height: 319,
    backgroundColor: "rgba(255,255,255,1)",
    position: "absolute",
    borderRadius: 20,
    borderBottomRightRadius: 20
  },
  cupertinoButtonSuccess: {
    width: 65,
    height: 39,
    borderRadius: 6,
    marginTop: 200,
    marginLeft: 261
  },
  cupertinoButtonWarning1: {
    width: 167,
    height: 44,
    borderRadius: 10,
    marginTop: 9,
    marginLeft: 159
  },
  rect2: {
    top: 0,
    left: 48,
    width: 42,
    height: 42,
    backgroundColor: "rgba(255,255,255,1)",
    position: "absolute",
    transform: [
      {
        rotate: "45.00deg"
      }
    ],
    borderRadius: 7
  },
  materialIconTextbox: {
    top: 59,
    left: 0,
    width: 343,
    height: 48,
    position: "absolute"
  },
  materialIconTextbox2: {
    top: 141,
    left: 0,
    width: 343,
    height: 48,
    position: "absolute"
  },
  rectStack: {
    width: 343,
    height: 338,
    marginTop: 125,
    marginLeft: 16
  },
  services1: {
    color: "rgba(247,242,242,1)",
    fontSize: 36,
    fontFamily: "Cochin-BoldItalic",
    marginTop: -450,
    marginLeft: 18
  }
});

//export default Login;

CupertinoSuccess.js

import React, { Component } from "react";
import { StyleSheet, TouchableOpacity, Text, Button } from "react-native";
import { withNavigation } from 'react-navigation';
import { NavigationInjectedProps } from 'react-navigation';
import { createStackNavigator } from "react-navigation-stack";


function CupertinoButtonSuccess(props) {
  return (
    <TouchableOpacity
    onPress={() => this.props.navigation.goBack()}
    style={[styles.container, props.style]}>
      <Text style={styles.caption}>{props.text1 || "Button"}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#4CD964",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingRight: 12,
    paddingLeft: 12,
    borderRadius: 5
  },
  caption: {
    color: "#fff",
    fontSize: 17,
    //fontFamily: "Cochin-BoldItalic"
  }
});

export default CupertinoButtonSuccess;

获取错误/异常：

未定义对象'this.props'

Answer 1

您有一个带有props参数的功能组件：

function CupertinoButtonSuccess(props) {
  // ...
}

内部，您正在使用this.props.navigation.goBack()。但是this.props在功能组件中不可用。您需要将其更改为使用props.navigation.goBack()（无this）。

Answer 2

我有相同的问题，并使用navigation without navigation prop解决了。因此，基本上，您可以在应用程序中创建导航服务功能，然后将其导入要使用导航功能的任何位置而无需通过导航道具。该文档显示了您真正需要如何创建和使用它。