Неопределенный объект навигации

Question

Я пытаюсь построить навигацию между различными представлениями мобильного приложения React-Native. Однако мой объект навигации (для запуска navigation.navigate) всегда имеет значение null. Таким образом, всякий раз, когда я нажимаю на «соединение» или «надпись», появляется следующая ошибка:

TypeError, undefined is not an object (evaluating "navigation.navigate") 

Мои файлы:

1. пакет. json (список зависимостей)
2. App_Default. js (точка входа. Перенаправление на целевую страницу. js)
3. Три просмотра. (проблема в посадке. js)
4. Конфигурация навигации (Navigation. js)

пакет. json

"dependencies": {
    "expo": "~38.0.8",
    "expo-status-bar": "^1.0.2",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-gesture-handler": "^1.7.0",
    "react-native-screens": "^2.9.0",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.4.0",
    "react-navigation-stack": "^2.8.2"
  },

App_Default. js (мой файл записи, работает должным образом)

import React from "react";
import Landing from "./app/views/landing";

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

. / App / views / landing. js

import { StatusBar } from "expo-status-bar";
import React from "react";
import { useNavigation } from "react-navigation";
import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";
import Navigator from "../Navigation";

export default function Landing({ navigation }) {
  console.log(navigation);
  const pressHandler = (screen) => {
    navigation.navigate(screen);
  };
  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.connexion}
        onPress={() => pressHandler("ConnectToApp")}
      >
        <Text>Connexion</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => pressHandler("Signup")}
        style={styles.signup}
      >
        <Text>Inscription</Text>
      </TouchableOpacity>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  connexion: {
    position: "absolute",
    alignItems: "center",
    justifyContent: "center",
    bottom: "20.625%",
    borderRadius: 8,
    left: "5.2%",
    borderWidth: 3,
    borderColor: "#000000",
    width: 156,
    height: 52,
  },
  signup: {
    position: "absolute",
    alignItems: "center",
    justifyContent: "center",
    bottom: "20.625%",
    borderRadius: 8,
    right: "5.2%",
    borderWidth: 3,
    borderColor: "#000000",
    width: 156,
    height: 52,
  },
});

./app/views/connect_to_app.js

import React from "react";
import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";

export default function ConnectToApp() {
  return (
    <View style={styles.container}>
      <Text>Signup</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

. / app / views / Registration. js

import React from "react";
import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";

export default function Signup() {
  return (
    <View style={styles.container}>
      <Text>Signup</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

И, наконец, Navigator: Navigation. js

// Navigation/Navigation.js

import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import ConnectToApp from "./views/connect_to_app";
import Signup from "./views/Signup";
import Landing from "./views/landing";

const screens = {
  ConnectToApp: {
    screen: ConnectToApp,
    navigationOptions: {
      title: "ConnectToApp",
    },
  },
  Signup: {
    screen: Signup,
    navigationOptions: {
      title: "Inscription",
    },
  },
  Landing: {
    screen: Landing,
    navigationOptions: {
      title: "Landing",
    },
  },
};

const HomeStack = createStackNavigator(screens);
export default createAppContainer(HomeStack);

Answer 1

Вы напрямую используете экран посадки в приложении. js но настраиваете навигацию в навигаторе. js.

Вам следует импортировать навигацию в приложение. js и использовать, как показано ниже

import Navigator from "../Navigation";

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

Если это новое приложение, лучше обновитесь до Navigation V5.