如何在组件之间导航

Question

我之前在研究 React JS，我是 React Native 的新手 我正在尝试在我的应用程序中的组件之间导航 我在用反应导航我不知道这是否是最简单的方法

我有 app.js 和 Sign.js

应用程序.js

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {Provider as PaperProvider} from 'react-native-paper';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {StyleSheet, Text, View} from 'react-native';
import {Avatar, Card, Title, Paragraph} from 'react-native-paper';
import {Image} from 'react-native';

import {Button} from 'react-native';

function Dashbord({navigation}) {
  const LeftContent = props => <Avatar.Icon {...props} icon="folder" />;
  return (
    <View style={styles.main}>
     
      
      <Card
        style={styles.main2}
        onPress={() => navigation.navigation.navigate('Sign')}>
        <Image
          source={require('./assets/images/mother.png')}
          style={{
            width: 80,
            marginLeft: 90,
            marginTop: 0,
            justifyContent: 'center',

            height: 80,
            textAlign: 'center',
          }}
        />
        <Text
          style={{
            textAlign: 'center',
            fontSize: 20,
            fontFamily: 'Poppins-ExtraBold',
          }}>
          i am a mother
        </Text>
      </Card>
    </View>
  );
}



const Stack = createNativeStackNavigator();

function App() {
  return (
    <PaperProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            options={{headerShown: false}}
            name="Home"
            component={HomeScreen}
          />
          <Stack.Screen name="Dashbord" component={Dashbord} />
          <Stack.Screen name="sign" component={sign} />
        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}

sign.js 位于 components 文件夹中，我不知道如何访问它签名.js

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

export default function Sign(navigation) {
  return (
    <View style={styles.prheight}>
      <View style={styles.prheight}>
        <Text style={styles.r}>dada</Text>
      </View>
      <View style={styles.buttonw}>
        <Button color="#7743DB" title="Lets Go" />
      </View>
    </View>
  );
}

我得到的错误是属性符号不存在

Answer 1

HomeScreen 功能的一点变化： HomeScreen(navigation) 到 HomeScreen({ navigation })

如果你想使用HomeScreen(navigation)，只需更改onPress功能： onPress={() => navigation.navigate('Dashbord')}至onPress={() => navigation.navigation.navigate('Dashbord')}