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

Question

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

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

文件插入.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 中使用它。