Question

我自学React-Native，我遇到了这个奇怪的障碍。在我的App.js内，我试图导出一个类，然后在我App.js函数中的somePage()内使用另一个文件。在我点击<Header/>时，我试图在我的物理设备上显示该文字时调用refresh。

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

（顺便说一句，我使用Expo，而不是拥有index.ios.js文件，而是App.js文件仍支持跨平台开发。“ / p>

这是我的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;

Answer 1

反应的概念是父组件呈现子组件。您只需要注册一次，因为根组件是所有其他组件的父组件。要呈现的任何其他子组件或孙组件必须是根组件的后代。作为旁注，您不需要在export default组件前面放置Project，因为您没有将其导出到任何位置：您在下面注册它。

要修复您的应用，您需要将标头组件放在已注册的根组件中：

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

为什么你不能拥有两条AppRegistry.registerComponent行？

1 个答案: