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

Question

我正在尝试使用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() 设置根，所以这就是为什么我认为这就是问题所在。

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

▼Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at registerRootComponent.js:35. in ExpoRootComponent (at renderApplication.js:33) in RCTView (at View.js:60) in View (at AppContainer.js:102) in RCTView (at View.js:60) in View (at AppContainer.js:122) in AppContainer (at renderApplication.js:32)

任何能让我找到解决方案的东西都将不胜感激!

Answer 1

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