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道具

在屏幕之间移动以响应本机

2 个答案: