Question

我是本机反应的新手。我已经使用Wix react-native-navigation库在页面之间进行导航。我想编写一个像波纹管这样的单独的导航类，并在项目中需要的任何地方调用它。但是我收到“ 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

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

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()

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

2 个答案: