Question

我在iOS Swift语言方面相当先进，但在反应原生框架或javascript语言方面非常新。我也试图找到适当的堆栈导航器教程几个小时，但我找不到它。我目前正在使用this tutorial来学习反应本机堆栈导航的基本知识，并希望将两个屏幕分成他们自己的文件。基本上，我想模仿Swift的AppDelegate.swift和View Controller的文件。但它会产生如下错误：

不变违规：元素类型无效：预期为字符串（for 内置组件）或类/函数（用于复合组件）但得到了：对象。您可能忘记从中导出组件文件已定义，或者您可能混淆了默认和命名进口。

那是旧错误。现在出现了新的错误：

TypeError：undefined不是对象（评估'this.props.navigation.navigate'）

此错误位于：
     HomeScreen中的
（在renderApplication.js：33）

...

这是我目前的代码。这已根据解决方案进行了编辑。

App.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>
    );
  }
}

我非常感谢代码中的任何错误和错误，因为现在我完全忘记了代码中的任何问题，因为我自己也在学习。请帮忙。每次我学习新语言时，第一步是最难的部分。

在这种情况下，我正在尝试使用一个按钮创建一个主屏幕，该按钮指向第二个屏幕（配置文件），其中包含文本。我也知道我应该能够在ProfileScreen发送的HomeScreen中提取个人资料的名称，但我现在对其进行了硬编码，以便我理解解决方案。

Answer 1

在react-native中，我们不使用AppRegistry.registerComponent注册每个组件，而是注册父组件和父组件呈现子组件。您需要进行的更改是注册App组件并导出HomeScreen和ProfileScreen。

<强>示例

<强> App.js

...
const App = StackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
});
AppRegistry.registerComponent('projectName', () => App)

<强> HomeScreen.js

...
class HomeScreen extends React.Component {
  ...
}
export default HomeScreen;

<强> ProfileScreen.js

...
class ProfileScreen extends React.Component {
  ...
}
export default ProfileScreen;

希望这会有所帮助！

Answer 2

试试这个

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 />;

使导航脚本文件全局化以访问其道具！

为什么从其他文件导入组件导致“不变违规：元素类型无效”错误？

2 个答案: