如何在 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-navigation v5 文档反应组件中的道具。 我试过了，但没有成功。

我看到这个错误

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访问根导航对象并将其传递给我们稍后将用于navigate的RootNavigation 。

用法

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;

或者，您可以省略该代码段​​并像这样更改按钮代码段：

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

希望有帮助。