从组件导航到屏幕反应原生答案

【问题标题】：Navigating to a screen from a component react native从组件导航到屏幕反应原生
【发布时间】：2020-01-26 01:07:08
【问题描述】：

您好，当用户单击用户的图片时，我正在尝试进入个人资料页面。使用 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: Undefined is not an object(evalating 'navigation.navigate')

【问题讨论】：

将HomeProfile 添加到您的MainStack

标签： react-native

【解决方案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

【讨论】：