在反应原生的屏幕之间移动

Question

我正在尝试在本机反应的屏幕之间移动，但我不断收到一个错误，即 navigation.navigate 未定义。如何让导航道具在我的 onpress 功能中工作？

这是登录组件

import React, {Component}from 'react';
import {  View, Text } from 'react-native';
import {Card,Input,Button} from 'react-native-elements';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator} from '@react-navigation/stack';

const Login = ({navigation}) => {
console.log(navigation)
return (
    <View>
<Card>

<Text>{'Welcome Back'}</Text>
  <Input placeholder="Username"
  ></Input>
  <Input placeholder="Password"
  ></Input>
<Button title="Sign In"
onPress={()=> navigation.navigate("Products")}/>
<Text>{"Forgot username/password"}</Text>
<Text>{"Not a member? Apply Now"}</Text>


</Card>
    </View>
)
}

export default Login;

这是我试图连接的另一个组件

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Login from './login';
import App from '../App';
import Products from './products';

const Stack = createStackNavigator();

function MyStack() {
  return (
<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Login"component={Login}/>
    <Stack.Screen name="App" component={App} />
    <Stack.Screen name="Products" component={Products} />
      </Stack.Navigator>
   </NavigationContainer>
     );
    }

export default MyStack;

这就是我的 app.js 的样子。我目前正在使用它来渲染背景图片

import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native'
import backgroundCopy from './images/backgroundCopy.jpg'
import Login from './components/login'
import { StyleSheet, View, Image } from 'react-native';


export default function App() {
  return (
    <NavigationContainer>
    <View style={styles.container}>
      <Image 
      source={backgroundCopy}
      style={styles.backgroundImage}
      />
      <Login/>
    </View>
      </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  backgroundImage: {
    flex:1,
    width: 400,
    height: 50
  }
});

Answer 1

我认为问题在于您没有将堆栈导航器链接到应用程序。在您的 MyStack 组件中，尝试删除 NavigationContainer 标记。同样在 App.js 中，不是渲染登录组件，而是导入并渲染 MyStack 组件。

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Login from './login';
import App from '../App';
import Products from './products';

const Stack = createStackNavigator();

function MyStack() {
  return (
  <Stack.Navigator>
    <Stack.Screen name="Login"component={Login}/>
    <Stack.Screen name="App" component={App} />
    <Stack.Screen name="Products" component={Products} />
  </Stack.Navigator>
     );
    }

export default MyStack;

import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native'
import backgroundCopy from './images/backgroundCopy.jpg'
// import your MyStack navigation component
import Login from './components/login'
import { StyleSheet, View, Image } from 'react-native';


export default function App() {
  return (
    <NavigationContainer>
    <View style={styles.container}>
      <Image 
      source={backgroundCopy}
      style={styles.backgroundImage}
      />
      <MyStack /> // Render your stack navigator here instead of login component
    </View>
      </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  backgroundImage: {
    flex:1,
    width: 400,
    height: 50
  }
});

这是因为“NavigationContainer 负责管理您的应用状态并将您的顶级导航器链接到应用环境”。

更多细节可以在这里的文档中找到：https://reactnavigation.org/docs/navigation-container

希望这行得通！

Answer 2

这是我的一个例子：

const AuthStackNavigator = createStackNavigator();

const AuthNavigator = () => {
    return <AuthStackNavigator.Navigator screenOptions={defaultNavOptions} >
        <AuthStackNavigator.Screen name="AuthRegisterScreen" component={AuthRegisterScreen} />
        <AuthStackNavigator.Screen name="AuthSignInScreen" component={AuthSignInScreen} />
        <AuthStackNavigator.Screen name="ForgotPasswordScreen" component={ForgotPasswordScreen} />
    </AuthStackNavigator.Navigator>
}

相信你的 Stack.Navigator 和 Stack.Screen 已经错过了。如果以这种方式设置，那么您的 Login 屏幕应该会获得 navigation 属性