我正在尝试使用 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 处)
任何能让我找到解决方案的东西都非常感谢!