Как вызвать встроенную функцию реагирования для навигации из другого класса

Question

Я новичок в реакции на родную. Я использовал библиотеку Wix реагировать на родную навигацию для навигации по страницам. Я хочу написать отдельный класс для навигации, как показано ниже, и вызывать его везде, где он мне нужен в моем проекте. Но я получаю ошибку для "this.props.componentId". Вот моя функция для навигации:

ScreenNavigation.js

import React,{Component} from 'react';
import {Navigation} from "react-native-navigation";

class ScreenNavigation extends Component{

constructor(props){
    super(props)
}

 goToScreen = (screenName) =>{

    Navigation.push(this.props.componentId , {
        component : {
            name : screenName
        }
    });
}

}
const NextPage = new ScreenNavigation();
export default  NextPage;

и вот моя страница входа (где я хочу вызвать функцию):

Login.js

import React, {Component} from 'react';
import {View, Button, Text} from 'react-native';
import NextPage from "../../my_classes/ScreenNavigation"

export default class Login extends Component {


render() {
    return (
        <View>
           <Text>Anna</Text>
            <Button title={"Enter"} onPress= 
{()=>NextPage.goToScreen('myRegister')}> </Button>
        </View>
    );
 }
 }

Пожалуйста, помогите мне решить мою проблему.

это мой файл index.js:

import {Navigation} from 'react-native-navigation';
import Login from './my_screens/login&register/Login';


Navigation.registerComponent('myLogin',()=>Login);


Navigation.events().registerAppLaunchedListener(()=>{

    Navigation.setRoot({
            root : {

                stack : {
                    id:'AppStack',
                    children : [
                        {
                            component : {
                                name : 'myLogin' ,
                                options : {
                                    topBar : {
                                        title : {
                                            text : 'Login'
                                        }
                                    }

                                }
                            },
                        }
                    ]
                }
            }
        }

       )
    });

Answer 1

Если вы хотите выполнить функцию компонента в другом компоненте, есть два способа сделать это. Передавая prop в ваш дочерний компонент, например

<RootcComponent <Login gotoScreen={this. goToScreen} /> />

и затем вам нужно вызвать эту функцию в компоненте входа в систему

this.props.goToScreen()

Но если этот компонент не является вашим дочерним компонентом, вам нужно передать это в параметрах навигации, подобных этому

this.props.navigation.navigate('RouteName', {goTo: this.goToScreen})

и затем в вашем компоненте, где вы хотите выполнить эту функцию

this.props.navigation.state.params.goToScreen()

Answer 2

Сначала следуйте официальной документации . Согласно документации, вы должны сначала зарегистрировать экран компонента. В противном случае вы не сможете перейти к этому экрану. Во-вторых, вы не пропускаете никаких реквизитов. Так что это на самом деле не определено.