React Native - 使用功能组件进行导航

Question

我安装了 Navigation 以从一个页面获取一些数据并发送到另一个页面（希望我会）。但它不起作用，我得到

"We couldn't find a navigation object. Is your component inside a navigator?"

文件Insert.js

import React, { useState } from "react";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { useNavigation } from "@react-navigation/native";


import ViewData from "./ViewData";

const MainNavigator = createStackNavigator({
  ViewDataPage: ViewData
});

...

const Insert = props => {

...

  createAppContainer(MainNavigator);

  const navigate = useNavigation();

  return (
    <TouchableWithoutFeedback
      onPress={() => {
        Keyboard.dismiss();
      }}
    >
      <View style={styles.inputContainer}>
        <Input
          placeholder="Your Name"
          onChangeText={text => setEnteredName(text)}
          value={enteredName}
        />


...


        <View>
          <Button
            title="Submit"
            onPress={() => sendValues(enteredName, enteredSurname)}
          />
          <Button
            title="Click"
            onPress={() =>navigate("ViewDataPage", { name: "Jane" })
            }
          />
        </View>
      </View>
    </TouchableWithoutFeedback>

我想我弄得一团糟，我什至无法获取页面"ViewData"。我想更改页面在挂钩中发送一些值知道我哪里弄错了吗？

Answer 1

"@react-navigation/native" 适用于 React Navigation 5。您不能将其与 React Navigation 4 一起使用。

React Native - 使用功能组件进行导航

React Native - Navigation with functional components

navigation

react-native