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

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

NativeBase Container 目前主要接受Header、Content 和Footer。

NativeBase Content 依次采用 React Native 的 Image、View 和 ScrollView，而不是任何其他自定义组件。

感谢您注意到这一点。

我的团队会尽快与您联系并提供解决方案。

Answer 2

所以我已经解决了这个问题... 似乎 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>
    );
  }
}

所以现在，如果您注意到，我的 main.js 中只有 <Text> 标签，而不是 <Content> 标签...不太清楚为什么这会产生巨大差异，但很高兴知道！