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 ， 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>標記...不太清楚為什么會有很大的不同，但是很高興知道！