3

我正在尝试使用 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',
    },
  });

我试图按照react-native-navigation 文档及其示例应用程序上的指南进行操作,但无法理解我正在做的不同之处在于搞砸了!

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

控制台日志:START REGISTER REGISTERING APP LAUNCH LISTER

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

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

▼警告:React.createElement:类型无效——期望一个字符串(对于内置组件)或一个类/函数(对于复合组件),但得到:对象。您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。

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

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

4

1 回答 1

-2

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

于 2019-08-06T19:19:43.773 回答