React NativeBase не показывает мои импортированные компоненты

Question

Я довольно новый, чтобы реагировать и реагировать на корень, и у меня есть игра с 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 показывает хорошо, и заголовок отображается в симуляторе 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> в моем main.js, а не теги <Content> ... Не слишком уверен, почему это имеет огромное значение, но это хорошо знать!

Answer 2

NativeBase Container на данный момент в основном принимает Header, Content и Footer.

NativeBase Содержимое в свою очередь принимает изображение, просмотр и прокруткуПримечание React Native, а не любые другие пользовательские компоненты.

Благодарим вас за это.

Моя команда вернется к вам с решением.