在实现反应本机导航时，未定义不是对象（评估'props.navigation.navigate'）答案

【问题标题】：undefined is not an object (evaluating 'props.navigation.navigate') while implementing react native navigation在实现反应本机导航时，未定义不是对象（评估'props.navigation.navigate'）
【发布时间】：2021-11-28 04:30:32
【问题描述】：

想在我的 expo 应用程序中实现反应导航，但我遇到了这个错误。

这是我在第一个屏幕上的代码以及我使用导航的地方：

import React from "react";
import { View, Image, Text,TouchableOpacity } from "react-native";
import PropTypes from "prop-types";
import AppIntroSlider from "react-native-app-intro-slider";
import dynamicStyles from "./styles";
import { useColorScheme } from "react-native-appearance";
const WalkthroughScreen = (props) => {
  const appConfig = props.appConfig;
  const appStyles = props.appStyles;
  const colorScheme = useColorScheme();
  const styles = dynamicStyles(appStyles, colorScheme);
  const slides = appConfig.onboardingConfig.walkthroughScreens.map(
    (screenSpec, index) => {
      return {
        key: `${index}`,
        text: screenSpec.description,
        title: screenSpec.title,
        image: screenSpec.icon,
        touchableOpacity:screenSpec.touchableOpacity
      };
    }
  );

  const _renderItem = ({ item, dimensions }) => (
    <View style={[styles.container, dimensions]}>
      <Image
        style={styles.image}
        source={item.image}
        size={100}
        color="white"
      />
      <View>
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.text}>{item.text}</Text>
      </View>
      <TouchableOpacity onPress={() =>{
        props.navigation.navigate("HomeScreen");
      }}><Text>{item.touchableOpacity}</Text></TouchableOpacity>
    </View>
  );

  return (
    <AppIntroSlider
      data={slides}
      slides={slides}
      renderItem={_renderItem}
      //Handler for the done On last slide
      showSkipButton={false}
      showDoneButton={false}
      showNextButton={false}
    />
  );
};

WalkthroughScreen.propTypes = {
  appStyles: PropTypes.object,
  appConfig: PropTypes.object,
};

export default WalkthroughScreen;

这是导航屏幕：

import { createAppContainer, createSwitchNavigator} from 'react-navigation';
// importing screens
import Home from './home';
import GetStarted from './GetStarted';

const SwitchNavigator = createSwitchNavigator({
    GetStartedScreen: GetStarted,
    HomeScreen: Home    
});
export default createAppContainer(SwitchNavigator);

这是在 app.js 中：

import React from 'react'
import Navigator from './stack'

export default function App() {
  return (
    <Navigator />
  )
}

这是我在其中调用演练屏幕的入门屏幕。

import React, { useEffect, useState } from "react";
import { AppearanceProvider, Appearance } from "react-native-appearance";
import WalkthroughScreen from "./screens/WalkthroughScreen/WalkthroughScreen";
import WalkthroughAppConfig from "./WalkthroughAppConfig";
import DynamicAppStyles from "./DynamicAppStyles";

export default function GetStarted({navigation}) {
  const [colorScheme, setColorScheme] = useState(Appearance.getColorScheme());

  useEffect(() => {
    Appearance.addChangeListener(({ colorScheme }) => {
      setColorScheme(colorScheme);
    });
  });

  return (
    <AppearanceProvider>
      <WalkthroughScreen
        appConfig={WalkthroughAppConfig}
        appStyles={DynamicAppStyles}
      />
    </AppearanceProvider>
  );
}

有人可以告诉我我做错了什么吗？我对原生反应有点陌生。

【问题讨论】：

看起来 navigation 道具没有被传递到您的组件中。 console.dir(props, {depth:null}) 显示什么？
您是否在导航中添加了 WalkthroughScreen 屏幕，因为我在这里查看您尚未在此导航中导入和添加。请添加并重试。
嗨@VishalPawar 我实际上有一个入门屏幕，它调用了演练屏幕，称为我已经更新了问题。
@Urmzd 这不会打印任何东西

标签： javascript reactjs react-native react-hooks expo

【解决方案1】：

进一步查看您的代码，您提供的 console.dir 向我表明您没有转发道具（如果您希望子组件能够访问导航，这是必需的）。

您可以通过传播您想要传递的任何道具来解决它。例如，在您的 GetStartedScreen 中，尝试以下操作：


const walkthroughProps = {navigate}

return (

    // Wrapper Begin
    <WalkthroughScreen 
    // Other props
    {...walkthroughProps}
    />
    // Wrapper End

)

【讨论】：

【解决方案2】：

所以你在 GetStarted Screen 中添加了该组件，这就是问题所在，你需要将 GetStartedScreen 中的所有道具传递给 WalkthroughScreen（组件）：

export default function GetStarted(props) { //or {props: {navigation}}
  ...

  return (
    <AppearanceProvider>
      <WalkthroughScreen
        {...props}
        ... //other props
      />
    </AppearanceProvider>
  );
}

现在您将获得 WalkthroughScreen 中的所有道具

【讨论】：