react-native ignite bowser 如何导航到另一个页面？

Question

我是新来的反应原生/点燃弓箭手。我正在制作一个 react native / ignite bowser 项目。

在我的应用程序中，首先会出现一个欢迎屏幕，该屏幕会在应用程序启动时出现。欢迎屏幕中有一个“继续”按钮。当我单击“继续”按钮时，它应该进入登录屏幕。但它显示了这个错误：

TypeError: undefined is not an object (evaluating 'navigation.navigate')

我正在实际的物理 Android 设备上运行该应用程序。

谁能帮帮我？这是我在 github 中的代码：

https://github.com/boidurja/smartcope_new.git

这是发生错误的代码部分：

    <Button title="Countinue" containerStyle={{ flex: 1 }} onPress={ ( ) => navigation.navigate('login') }/>

在这个文件中：

app/screens/auth-screens/welcome-screen.tsx

有人告诉我，在这种情况下，问题是 props 属性没有导航对象，因为在新版本的库中，我们必须使用 react hooks 来检查 react-navigation v5 文档如何访问 react 组件中的导航道具。我试过了，但没有成功。

我看到了这个错误

Answer 1

您似乎没有正确接收到 Navigation 对象。如果这是您使用的component，请使用useNavigation 函数。

useNavigation 是一个钩子，可以访问导航对象。 当您无法将导航道具传递到 直接使用组件，或者不想通过它以防万一 嵌套的孩子。

import { useNavigation } from '@react-navigation/native';

export const AuthScreensWelcomeScreen: FunctionComponent<AuthScreensWelcomeScreenProps> = observer((props) => {
...
 const navigation = useNavigation();

...
<Button title="Countinue" containerStyle={{ flex: 1 }} onPress={ ( ) => navigation.navigate('login') }/>

或

您可以通过ref 和 将它传递给RootNavigation，我们稍后将使用它给navigate。

用法

import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';

export default function App() {
  return (
    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
  );
}

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

// add other navigation functions that you need and export them

// any js module
import * as RootNavigation from './path/to/RootNavigation.js';


export const AuthScreensWelcomeScreen: FunctionComponent<AuthScreensWelcomeScreenProps> = observer((props) => {
// ...

<Button title="Countinue" containerStyle={{ flex: 1 }} onPress={ ( ) => RootNavigation.navigate('login') }/>

Answer 2

在 welcomscreen.tsx 中，尝试更改这一行：

const {
        navigation
    } = props;

到这里：

const {
        navigation
    } = this.props;

或者，您可以不使用该 sn-p 并更改按钮 sn-p，如下所示：

<Button title="Countinue" containerStyle={{ flex: 1 }} onPress={() => this.props.navigation.navigate('login') }

希望对您有所帮助。