WIX React-native-navigation v2 不会调用 registerAppLaunchedListener()

Posted 2023-02-16

【中文标题】WIX React-native-navigation v2 不会调用 registerAppLaunchedListener()

【英文标题】：WIX React-native-navigation v2 will not call registerAppLaunchedListener()

【发布时间】：2018-11-26 06:21:57

【问题描述】：

我正在尝试使用 react-native-navigation 启动一个项目，但似乎无法顺利进行。

现在，我收到的错误是 React 无法渲染根组件，我已经设法找到原因（据我所知）是我创建的函数 Navigation.events().registerAppLaunchedListener，从未调用过，我似乎找不到不调用的原因。我的代码如下

我的 App.js 文件是项目要调用的第一个 JS 文件。项目的根文件可以这么说

const  start = require('./Navigation')
start();

我的 Navigation.js 文件，带有从 App.js 调用的 start() 函数。在这里，我在 registerAppLaunchedListener() 中初始化根屏幕，这是我的问题。

const  Navigation  = require('react-native-navigation');
const  registerScreens  = require('./screens');
const  Platform  = require('react-native');

function start() 
    console.log("START")
    registerScreens();
    console.log("REGISTERING APP LAUNCH LISTER")
    Navigation.events().registerAppLaunchedListener(() => 

        console.log("SETTING ROOT");

        Navigation.setRoot(
            root: 
                stack: 
                  children: [
                    
                      component: 
                        name: 'navigation.loginscreen'
                      
                    
                  ]
                
              
        );
    );


module.exports = 
  start
;

./screens 中的 index.js 文件，用于将屏幕组件注册到 ID，稍后在 setRoot 下的 registerAppLaunchedListener() 中使用

const  Navigation  = require('react-native-navigation');
const LoginScreen = require('./LoginScreen');
const HomeScreen = require('./HomeScreen');

function registerScreens() 
    console.log("REGISTER");
    Navigation.registerComponent('navigation.loginscreen', () => LoginScreen);
    Navigation.registerComponent('navigation.homescreen', () => HomeScreen);



module.exports = 
    registerScreens
;

最后是我要首先显示的屏幕，永远不会显示的屏幕，LoginScreen.js。非常基础。

import React from 'react';
import  StyleSheet, Text, View  from 'react-native';
import BackgroundHex from '../Backend/Constants'


class LoginScreen extends React.Component
    render() 

        console.log("HEYEHY")

        return (
          <View style=styles.container>
            <Text>Open up App.js to start working on your app!</Text>
          </View>
        );
      


module.exports = LoginScreen;


const styles = StyleSheet.create(
    container: 
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    ,
  );

我尝试按照the react-native-navigation docs 和他们的sample app 上的指南进行操作，但无法理解我正在做的不同之处在于搞砸了！

我的第一个想法是，我认为这可能与我如何导出组件和功能有关，但似乎并非如此。

控制台日志： 开始 登记 注册应用启动列表

但不是从 registerAppLaunchedListener() 设置根目录，所以这就是为什么我认为这是问题所在。

相反，我收到以下错误堆栈

▼警告：React.createElement：类型无效——需要一个字符串 （对于内置组件）或类/函数（对于复合 组件）但得到：对象。您可能忘记导出您的 来自定义它的文件中的组件，或者您可能混淆了 默认和命名导入。

在 registerRootComponent.js:35 检查您的代码。 在 ExpoRootComponent (在 renderApplication.js:33) 在 RCTView 中（在 View.js:60） 在视图中（在 AppContainer.js:102） 在 RCTView 中（在 View.js:60） 在视图中（在 AppContainer.js:122） 在 AppContainer 中（在 renderApplication.js:32 处）

非常感谢任何能让我找到解决方案的东西！

【问题讨论】：

这有什么更新吗？

由于无人接听，我改用（反应导航）[reactnavigation.org/]。这是一个很棒的图书馆，强烈推荐它！ @AmitP

刚刚碰到那个？这里有更新吗？ @AmitP您设法解决了吗？谢谢

@jeevium 请远离 wix 导航。在过去的一年里，我花了几天几夜的时间来解决编译错误和各种问题。因为它需要您修改本机代码。它破坏了 RN 升级！与 reactnavigation 相比，它应该提供的优势（性能？）几乎为零，因此选择是显而易见的。

【参考方案1】：

尽快使用 registerAppLaunchedListener 注册监听器 - 它应该是 index.js 文件中的第一行之一。如果您在重新启动应用程序后观察到“白屏”或挂起的初始屏幕，这可能意味着应用程序启动后未调用 Navigation.setRoot。也许听众注册得太晚了。 - 来自文档