React NativeBaseにインポートされたコンポーネントが表示されない

Question

ReactとReact Nativeにはかなり新しく、React NativeBaseで遊んでいます。

私は1つのファイル内で以下の作業をすることができましたが、今はコードを別々のファイルで複数のコンポーネントに分割しようとしています。

問題はインポートしたコンポーネントが表示されないということです。私はこれでしばらくの間苦労しました。私が間違っていることを見ることはできません。おそらく何か本当にばかげています。ここで

は私のコードです：

コード/ 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>タグを私の01に持っていますで、<Content>タグではありません...なぜこれが大きな違いになるのかは分かりませんが、知っておきましょう！

Answer 2

NativeBase Containersは現在、主にHeader,およびFooterを受け入れています。

NativeBaseのコンテンツは、Reactネイティブのイメージ、ビュー、およびScrollViewを取り込み、他のカスタムコンポーネントは使用しません。

ご連絡ありがとうございます。

私のチームはあなたにソリューションを提供します。