Fatal编程技术网
  • javascript/
  • Javascript 为什么从其他文件导入组件会导致；不变冲突：元素类型无效"；错误？

Javascript 为什么从其他文件导入组件会导致；不变冲突：元素类型无效"；错误？

javascript react-native

Javascript 为什么从其他文件导入组件会导致；不变冲突：元素类型无效"；错误？,javascript,react-native,jsx,stack-navigator,Javascript,React Native,Jsx,Stack Navigator,我在iOS Swift语言方面相当先进，但在react原生框架或javascript语言方面非常新。我也试着为stack navigator找到合适的教程，但是我找不到。我目前正在使用react来学习本机堆栈导航的基本知识，并希望将这两个屏幕拆分为各自的文件。基本上，我想用它的AppDelegate.Swift模拟Swift，并查看控制器的文件。但它会产生如下错误： 不变冲突：元素类型无效：应为字符串（对于 内置组件）或类/函数（用于复合组件） 但我得到了一个目标。您可能忘记了从导出组件 文件，

我在iOS Swift语言方面相当先进，但在react原生框架或javascript语言方面非常新。我也试着为stack navigator找到合适的教程，但是我找不到。我目前正在使用react来学习本机堆栈导航的基本知识，并希望将这两个屏幕拆分为各自的文件。基本上，我想用它的AppDelegate.Swift模拟Swift，并查看控制器的文件。但它会产生如下错误：

不变冲突：元素类型无效：应为字符串（对于 内置组件）或类/函数（用于复合组件） 但我得到了一个目标。您可能忘记了从导出组件 文件，或者您可能混淆了默认值和命名 进口

那是老错误。现在出现新错误：

TypeError:undefined不是对象（计算'this.props.navigation.navigate'）

此错误位于：

在主屏幕中（位于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' })
        }
      />
    );
  }
}

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

从“React”导入React；
从“react native”导入{Button}；
从“react navigation”导入{StackNavigator}；
导出默认类主屏幕扩展React.Component{
静态导航选项={
标题:"欢迎",，
};
render（）{
const{navigate}=this.props.navigation；
返回(
导航（'Profile'，{name:'Jane'}）
}
/>
);
}
}
ProfileScreen.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' })
        }
      />
    );
  }
}

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

从“React”导入React；
从“react native”导入{Text}；
从“react navigation”导入{StackNavigator}；
导出默认类概要文件屏幕扩展React.Component{
静态导航选项={
标题：“简简介”，
};
render（）{
const{navigate}=this.props.navigation；
返回(
欢迎来到简简介！
);
}
}
如果您能指出我的代码中的任何错误，我将不胜感激，因为现在我完全没有意识到代码中的任何问题，因为我正在自学。请帮忙。每次我学习新语言时，第一步总是最难的

在本例中，我尝试创建一个带有按钮的主屏幕，该按钮将导致第二个屏幕（配置文件），其中包含文本。我也知道我应该能够在
主屏幕发送的
ProfileScreen
中提取配置文件的名称，但是我现在硬编码了它，以使我更容易理解解决方案。
在react native中，我们不使用
AppRegistry.registerComponent注册每个组件，而是注册父组件和父组件渲染子组件。您需要做的更改是注册
应用程序
组件并导出
主屏幕
和
配置文件屏幕

样本

App.js


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



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



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


HomeScreen.js


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



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



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


ProfileScreen.js


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



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



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



希望这会有帮助
 在react native中，我们不使用AppRegistry.registerComponent注册每个组件，而是注册父组件和父组件渲染子组件。您需要做的更改是注册
应用程序
组件并导出
主屏幕
和
配置文件屏幕

样本

App.js


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



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



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


HomeScreen.js


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



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



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


ProfileScreen.js


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



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



...
class ProfileScreen extends React.Component {
  ...
}
export default 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 />;



从“React”导入React；
从“react navigation”导入{StackNavigator}；
从“./主屏幕”导入主屏幕；
从“/ProfileScreen”导入ProfileScreen；
const App=StackNavigator({
主屏幕：{屏幕：主屏幕}，
ProfileScreen:{screen:ProfileScreen}，
}, {
initialRouteName:“主屏幕”，
headerMode:“无”
});
导出默认值（）=>；



  • 路由的名称应相同，但不是强制性的
推荐的
    • 

  • 导出导航元素
    • 

  • 我的项目中甚至没有AppRegistry脚本，但它仍在工作
    • 
如果有任何问题，请在下面发表评论！希望这能解决问题
    
注意：这将在react导航版本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 />;

    

    从“React”导入React；
从“反应导航”导入{createStackNavigator}；
从“./主屏幕”导入主屏幕；
从“/ProfileScreen”导入ProfileScreen；
const App=createStackNavigator({
主屏幕：{屏幕：主屏幕}，
ProfileScreen:{screen:ProfileScreen}，
}, {
initialRouteName:“主屏幕”，
headerMode:“无”
});
导出默认值（）=>；

    
将导航脚本文件设置为全局以访问其道具
     试试这个
    

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

    

    从“React”导入React；
从“react navigation”导入{StackNavigator}；
从“./主屏幕”导入主屏幕；
从“/ProfileScreen”导入ProfileScreen；
const App=StackNavigator({
主屏幕：{屏幕：主屏幕}，
ProfileScreen:{screen:ProfileScreen}，
}, {
initialRouteName:“主屏幕”，
headerMode:“无”
});
导出默认值（）=>；

    

  • 路由的名称应相同，但不是强制性的
推荐的
    • 

  • 导出导航元素
    • 

  • 我的项目中甚至没有AppRegistry脚本，但它仍在工作
    • 
如果有任何问题，请在下面发表评论！希望这能解决问题
    
注意：这将在react导航版本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 />;

    

    从“React”导入React；
从“反应导航”导入{createStackNavigator}；
从“./主屏幕”导入主屏幕；
导入配置文件屏幕