运行 onpress 功能时出现问题：反应导航

Posted 2023-04-18

【中文标题】运行 onpress 功能时出现问题：反应导航

【英文标题】：Problem when run onpress fonction : react navigation

【发布时间】：2021-02-06 06:28:11

【问题描述】：

我只想在单击“Enter”按钮时被重定向到我的“个人资料”页面。我不知道这是否是正确的方法，但我的主页是 App.js，它包含我的按钮和图像。对不起，我是初学者，而且是法语！

app.js

import 'react-native-gesture-handler';
import React from 'react';
import DisplayAnImage from './Components/DisplayAnImage';
import Profile from './Components/Profile';
import  Enter  from './Components/Enter';
import  StyleSheet, Text, ScrollView  from 'react-native';
import  NavigationContainer  from '@react-navigation/native';
import  createStackNavigator  from '@react-navigation/stack';




export default class App extends React.Component 
  render() 
    return (
      <ScrollView style= flex: 1 >
        <DisplayAnImage/>
        <Enter/>
      </ScrollView>
    )
  

进入.js

import React from 'react';
import  Platform, StyleSheet, Text, View, Image, Button, Alert, SafeAreaView  from 'react-native';
import Profile from './Profile.js';
import  createStackNavigator  from '@react-navigation/stack';
import  StackNavigator  from  'react-navigation';




export const Enter = ( navigation ) => 
  return (
    <SafeAreaView style=styles.Button>
      <View>
        <Button
          title="Entrer"
          color="#FFFFFF"
          onPress=() => this.props.navigation.navigate('Profile')
        />
      </View>
    </SafeAreaView>
  );






const styles = StyleSheet.create(
  Button: 
    flex: 1,
    marginHorizontal: 120,
    borderRadius: 20,
    backgroundColor: '#1067b3'
    ,
  title: 
    textAlign: 'center',
    marginVertical: 8,
  ,
  fixToText: 
    flexDirection: 'row',
    justifyContent: 'space-between',
  ,
  separator: 
    marginVertical: 8,
    borderBottomColor: '#737373',
    borderBottomWidth: StyleSheet.hairlineWidth,
  ,
);

profile.js

import React, Component from 'react';
import  View, Text  from 'react-native';


export default class Profile extends React.Component 
    render() 
        return (
            <View>
                <Text>Profile</Text>
            </View>
            );
    

非常感谢您的帮助

【问题讨论】：

你还没有设置导航，最好通过reactnavigation.org/docs/getting-started

【参考方案1】：

您正在从功能组件中调用“this”。请改一下

onPress=() => this.props.navigation.navigate('Profile')

到

onPress=() => navigation.navigate('Profile')

【讨论】：

您好，非常感谢，我现在遇到了这个错误：TypeError: undefined is not an object (evaluating 'navigation.navigate') - node_modules/react-native/Libraries/LogBox/LogBox. js:148:8 in registerError - node_modules/react-native/Libraries/LogBox/LogBox.js:59:8 in errorImpl - node_modules/react-native/Libraries/LogBox/LogBox.js:33:4 in console.error 。 ..