我在 iOS Swift 语言方面相当先进,但在 React Native 框架或 JavaScript 语言方面却很新。我还尝试了几个小时来寻找正确的堆栈导航器教程,但我找不到它。我目前正在使用this tutorial了解 React Native 堆栈导航的基础知识,并希望将两个屏幕拆分为自己的文件。基本上,我想用它的 AppDelegate.swift
和 View Controller 的文件来模仿 Swift。但它会产生这样的错误:
Invariant Violation: Element 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.
那是老错误。现在的新错误:
TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')
This error is located at:
in HomeScreen (at renderApplication.js:33)
...
这是我当前的代码。此内容已根据解决方案进行编辑。
应用程序.js:
import React from 'react';
import { Button, AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';
export default HomeScreen;
const App = StackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
});
AppRegistry.registerComponent("TestProject", () => App);
HomeScreen.js:
import React from 'react';
import { Button } from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Go to Jane's profile"
onPress={() =>
navigate('Profile', { name: 'Jane' })
}
/>
);
}
}
ProfileScreen.js:
import React from 'react';
import { Text } from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class ProfileScreen extends React.Component {
static navigationOptions = {
title: 'Jane Profile',
};
render() {
const { navigate } = this.props.navigation;
return (
<Text>Welcome to Jane profile!</Text>
);
}
}
如果有人指出我的代码中的任何错误和错误,我将不胜感激,因为现在我完全没有注意到代码中的任何问题,因为我正在自学。请帮忙。每次我学习新语言时,第一步总是最困难的部分。
在本例中,我尝试创建一个带有按钮的主屏幕,该按钮可通往第二个屏幕(配置文件),其中包含文本。我还知道我应该能够在 HomeScreen
发送的 ProfileScreen
中提取配置文件的名称,但我现在对其进行了硬编码,以使事情变得简单我了解解决方案。
最佳答案
试试这个
import React from 'react';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';
const App = StackNavigator({
HomeScreen: { screen: HomeScreen },
ProfileScreen: { screen: ProfileScreen },
}, {
initialRouteName: 'HomeScreen',
headerMode: 'none'
});
export default () => <App />;
- 路线名称应该相同,但不是强制性的 推荐。
- 导出导航元素。
- 我的项目中甚至没有 AppRegistry 脚本,但它仍在运行。
如果有任何问题请在下面评论!希望这能解决问题
注意:这将在react-navigation版本1.5.11中工作
对于react-navigation v2尝试此代码
import React from 'react';
import { createStackNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';
const App = createStackNavigator({
HomeScreen: { screen: HomeScreen },
ProfileScreen: { screen: ProfileScreen },
}, {
initialRouteName: 'HomeScreen',
headerMode: 'none'
});
export default () => <App />;
使导航脚本文件全局化以访问其 Prop !
关于javascript - 为什么从其他文件导入组件会导致 "Invariant Violation: Element type is invalid"错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50346719/