Блог

Я просто хотел бы, чтобы меня перенаправили на страницу моего «Профиля», когда я нажимаю на кнопку «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>
    )
  }
}
  

enter.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>
            );
    }
}
  

Большое вам спасибо за вашу помощь

Вы вызываете «это» из своего функционального компонента. Пожалуйста, измените это

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

Для

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