React NativeBase가 가져온 구성 요소를 표시하지 않습니다.

Question

저는 React and 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 I이 사용을하고 있는데

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

을 내 01에 <Text> 개의 태그가 있습니다.은 아니고 <Content> 태그가 아닙니다. 왜 이것이 큰 차이를 만들지는 모르겠지만 알아두면 좋습니다!

Answer 2

NativeBase Container는 현재 주로 Header, 및 Footer을 수용합니다.

NativeBase 콘텐츠는 React Native의 이미지,보기 및 ScrollView를 사용하며 다른 사용자 지정 구성 요소는 사용하지 않습니다.

신고 해 주셔서 감사합니다.

팀이 해결책을 알려 드리겠습니다.