React NativeBase 不显示我导入的组件

Question

我对 React 和 React Native 还很陌生，我正在玩 React NativeBase。

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

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

这是我的代码：

code/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 中的代码显示正常，header 显示在 iPhone 模拟器中，但是，main.js 中的文本不显示.

非常感谢任何帮助！

Answer 1

所以我想通了这个问题... 似乎 React NativeBase 不允许您在主要组件之外拥有 <Content> 部分。像这样的东西有效：

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

code/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> 标签......不太清楚为什么这会产生巨大的差异，但很高兴知道！

Answer 2

NativeBase 容器目前主要接受 Header、Content 和 Footer.

NativeBase Content 依次采用 React Native 的图像、视图和滚动视图，而不是任何其他自定义组件。

感谢您注意到这一点。

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

React NativeBase 不显示我导入的组件

React NativeBase not showing my imported components

javascript

reactjs

react-native

native-base