React NativeBase没有显示我导入的组件

Question

我对React和React Native还是相当陌生，并且正在使用React NativeBase。

我设法在单个文件中完成以下工作，但是现在我只是试图将我的代码分成单独文件中的多个组件。

问题是，我的导入组件未显示。我已经为此苦苦挣扎了一段时间，但我看不到自己在做错什么……可能真的很愚蠢。

这是我的代码：

代码/index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {
  Container,
  Title,
  Header,
} from 'native-base';
import MainContent from './main';

class AwesomeNativeBase extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Title>My awesome app</Title>
        </Header>
        <MainContent />
      </Container>
    );
  }
}
AppRegistry.registerComponent('AwesomeNativeBase', () => AwesomeNativeBase);

代码/ main.js

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

export default class MainContent extends React.Component {
  render() {
    return (
      <Content>
        <Text>Oh hello there!</Text>
      </Content>
    );
  }
}

我正在使用此运行：

rnpm link
react-native run-ios

因此，请澄清一下，其中的代码可以index.ios.js正常显示，并且标题显示在iPhone模拟器中，但是其中的文本main.js却没有。

任何帮助深表感谢！

Answer 1

所以我已经解决了这个问题。似乎React NativeBase不允许您将该<Content>部分放在主要组件之外。像这样的作品：

代码/index.ios.js

import React, { Component } from 'react';

import {

  AppRegistry,

  StyleSheet,

  Text,

  View

} from 'react-native';

import {

  Container,

  Title,

  Header,

  Content,

} from 'native-base';

import MainContent from './main';



class AwesomeNativeBase extends Component {

  render() {

    return (

      <Container>

        <Header>

          <Title>My awesome app</Title>

        </Header>

        <Content>

          <MainContent />

        </Content>

      </Container>

    );

  }

}

AppRegistry.registerComponent('AwesomeNativeBase', () => AwesomeNativeBase);

代码/ main.js

import React from 'react';

import { Text } from 'react-native';



export default class MainContent extends React.Component {

  render() {

    return (

      <Text>Oh hello there!</Text>

    );

  }

}

因此，如果您现在注意到的话，我的<Text>标签中只有标签，main.js而标签中却没有<Content>标签。