Перемещение между экранами стека с помощью импортированной кнопки

Question

Я новичок в нативной реакции, и у меня проблемы с установлением соединений между компонентами.

Например, onClickFunction() {this.props.navigation.navigate('CurrencyList')} не работает для моего шаблона. Я провел несколько исследований по этой теме, но не смог понять его лог c.

Это мое приложение. js

import React from 'react'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// Screens---------------------------------------------------------


// Auth Screens 
import Login from './screens/Authentication/Login'
import Register from './screens/Authentication/Register'


// Main Screens
import Home from './screens/Home'
import Converter from './screens/Converter'
import CurrencyList from './screens/CurrencyList'

//-----------------------------------------------------------------

const Stack = createStackNavigator();

var routeName = 'Converter';



export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName={`${routeName}`}>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Login" component={Login} />
          <Stack.Screen name="Register" component={Register} />
          <Stack.Screen name="Converter" component={Converter} />
          <Stack.Screen name="CurrencyList" component={CurrencyList} />
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}

Это моя страница конвертера

// Currency Converter Page

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

// Components

import UpdateButton from '../../components/UpdateButton'
import CurrencySelectButton from '../../components/CurrencySelectButton'
import CurrencyTextInput from '../../components/CurrencyTextInput'
import ConvertedCurrencyTextInput from '../../components/ConvertedCurrencyTextInput'

export default function Home() {
  return (
    <View style={styles.container}>
      
      <View style={styles.textHolder}>
      <CurrencyTextInput />
      <Text>=</Text>
      <ConvertedCurrencyTextInput />
      </View>

      <View style={styles.buttonHolder}>
      <CurrencySelectButton />
      <Text>to</Text>
      <UpdateButton />
      
      </View>
      
      
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonHolder: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#f1f1f1',
    alignContent: 'center'
    
  },
  textHolder:{
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#f1f1f1',
    alignContent: 'center'
  }
});

Это компонент кнопки, на котором я хочу изменить экран

import React from 'react'
import { TouchableOpacity, Text, StyleSheet } from 'react-native'



export default class CurrencySelectButton extends React.Component {


    onClickFunction() {
        this.props.navigation.navigate('CurrencyList')  
    }

    render() {
        return (
            
            <TouchableOpacity onPress={() => this.onClickFunction()} style={styles.button} >
                <Text style={styles.buttonText} >TRY</Text>
            </TouchableOpacity>
        )
    }
}


const styles = StyleSheet.create({
    button: {
        backgroundColor: 'black',
        padding: 15,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 15,
        flex: 1,
        height: 75,
        marginHorizontal:20
    },

    buttonText: {
        color: 'white',
        fontWeight: 'bold',
        fontSize: 17
    }

})

Answer 1

Вам нужно будет передать опору навигации от дома к кнопке, как показано ниже

export default function Home({navigation}) {
  return (
    <View style={styles.container}>
      
      <View style={styles.textHolder}>
      <CurrencyTextInput />
      <Text>=</Text>
      <ConvertedCurrencyTextInput navigation={navigation}/>
      </View>

      <View style={styles.buttonHolder}>
      <CurrencySelectButton />
      <Text>to</Text>
      <UpdateButton />
      
      </View>
      
    </View>
  );
}