javascript - 为什么不能有两条 AppRegistry.registerComponent 行？

我在自学React-Native我遇到了这个奇怪的障碍。在我的里面 App.js我正在尝试导出一个类，然后在我的 App.js 中使用另一个文件在 somePage() 里面功能。我在哪里打电话 <Header/>试图在点击 refresh 时让该文本出现在我的物理设备上.

它显示<Login/>完美，但不是 somePage() 中的内容功能。我的问题是，为什么？

(顺便说一句，我使用的是 Expo，而不是 index.ios.js 文件，而是一个仍然支持跨平台开发的 App.js 文件)。

这是我的 App.js文件:

import React, { Component } from 'react';
import {AppRegistry} from 'react-native';
import Login from './components/Login';
import Header from './components/Header';

export default class Project extends Component {
    render() {
        return (
            <Login/>
        );
    }
}

const somePage = () => (
    <Header/>
);

AppRegistry.registerComponent('someProject', () => Project);
AppRegistry.registerComponent('someProject', () => somePage);

这是我的 Header.js文件:

import React from 'react';
import {Text} from 'react-native';

const Header = () => {
    return <Text>Testing this out</Text>
}

export default Header;

---

Best Answer-推荐答案

react的概念是父组件渲染子组件。您只需注册一次，因为根组件是所有其他组件的父组件。您要渲染的任何其他子组件或孙组件都必须是根组件的后代。作为旁注，您不需要在 Project 组件前面有 export default，因为您没有将它导出到任何地方:您正在下面注册它。

要修复您的应用，您需要将 header 组件放在已注册的根组件中:

import React, { Component } from 'react';
import {AppRegistry, View } from 'react-native';
import Login from './components/Login';
import Header from './components/Header';

class Project extends Component {
    render() {
        return (
            <View>
              <Header/>
              <Login/>
            </View>
        );
    }
}


AppRegistry.registerComponent('someProject', () => Project);

关于javascript - 为什么不能有两条 AppRegistry.registerComponent 行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44609520/