如何调用 react 本机函数以从另一个类进行导航

Question

我是反应原生的新手。我使用Wix反应本机导航库在页面之间导航。我想像下面这样编写一个单独的导航类，并在项目中需要它的任何位置调用它。但是我收到"this.props.componentId"的错误。这是我的导航函数：

屏幕导航.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;

这是我的登录页面（我想在其中调用该函数）：

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

请帮助我解决我的问题。

这是我的索引.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

请先关注官方文档。根据文档，您必须先注册组件屏幕。否则，您无法导航到该屏幕。其次，你没有传递任何道具。所以它实际上是未定义的。

Answer 2

如果你想在另一个组件中执行一个组件的功能，有两种方法可以做到这一点。通过将 prop 传递到您的子组件中，例如

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

然后你需要在登录组件中调用该函数

this.props.goToScreen()

但是，如果此组件不是您的子组件，则需要在导航参数中传递它，如下所示

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

然后在要执行此功能的组件中

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