Question

嗨，我正在尝试在用户单击用户的图片时进入个人资料页面。使用onPress和navigation.navigate时出现错误。

这是App.js结构，非常简单，只有两个屏幕。

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from "./screens/HomeScreen";
import ProfileScreen from "./screens/ProfileScreen";
import HomeProfile from "./components/HomeProfile";

const MainStack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        headerShown: false,
        title: null
      }
    },
    Profile: {
      screen: ProfileScreen,
      navigationOptions: {
        headerTintColor: "white",
        headerStyle: {
          backgroundColor: "#161E33",
          borderBottomWidth: 0
        },
        title: null
      }
    }
  },
  {
    initialRouteName: "Home"
  }
);

class App extends React.Component {
  render() {
    return <MainStack />;
  }
}

export default createAppContainer(MainStack);

这是我在页面上半部分使用的组件，因此主页上没有太多代码。此刻一切都已硬编码

import {
  StyleSheet,
  TouchableOpacity,
  Image,
  Text,
  View,
  TextInput,
  TouchableWithoutFeedback,
  Keyboard
} from "react-native";
import { Button } from "react-native-elements";

const HomeProfile = ({ navigation }) => {
  return (
    <>
      <View style={styles.container}>
        <Image
          style={styles.background}
          source={{
            uri:
              "https://images.pexels.com/photos/1080721/pexels-photo-1080721.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
          }}
        />
        <TouchableOpacity onPress={() => navigation.navigate("Profile")}>
          <Image
            style={styles.image}
            source={{
              uri:
                "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80"
            }}
          />
          <Text style={styles.name}>Abby Smith</Text>
          <Text style={styles.unit}>Slater 116 #278</Text>
        </TouchableOpacity>
      </View>
    </>
  );
};


export default HomeProfile;

这是主页的一部分，它是主屏幕和默认屏幕，也是我导入组件的位置。

  const [contactModal, setContactModal] = useState(false);
  const [announcementsModal, setAnnouncementsModal] = useState(false);
  const [maintenanceModal, setMaintenanceModal] = useState(false);
  const [accessModal, setAccessModal] = useState(false);
  return (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <View style={styles.container}>
        <HomeProfile />

错误消息是-

TypeError：未定义的不是对象（正在评估“ navigation.navigate”）

Answer 1

您需要将导航道具传递给 HomeProfile 才能使用navigation.navigate。

<HomeProfile navigation={navigation}/>

const [contactModal, setContactModal] = useState(false);
  const [announcementsModal, setAnnouncementsModal] = useState(false);
  const [maintenanceModal, setMaintenanceModal] = useState(false);
  const [accessModal, setAccessModal] = useState(false);
  return (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <View style={styles.container}>
        <HomeProfile navigation={navigation} /> //====here

或者简单地说，您可以从react-navigation导入 withNavigation 并使用

之类的HomeProfile组件包装withNavigation HOC。

withNavigation（HomeProfile）

import {withNavigation} from 'react-navigation';

const HomeProfile = ({ navigation }) => {
  return (
    <>
      <View style={styles.container}>
        <Image
          style={styles.background}
          source={{
            uri:
              "https://images.pexels.com/photos/1080721/pexels-photo-1080721.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
          }}
        />
        <TouchableOpacity onPress={() => navigation.navigate("Profile")}>
          <Image
            style={styles.image}
            source={{
              uri:
                "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80"
            }}
          />
          <Text style={styles.name}>Abby Smith</Text>
          <Text style={styles.unit}>Slater 116 #278</Text>
        </TouchableOpacity>
      </View>
    </>
  );
};


export default withNavigation(HomeProfile); //check here

从组件导航到屏幕反应本机

1 个答案: