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

问题描述

当我单击“输入”按钮时，我只想重定向到我的“个人资料”页面。我不知道这是否正确，但是我的主页是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>
    )
  }
}

enter.js

import React from 'react';
import { Platform,StyleSheet,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>
            );
    }
}

非常感谢您的帮助

解决方法

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

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

到

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