ReactNative - компонент не рендеринга, когда он находится внутри любого другого тега | Пользовательские компоненты NativeBase

Question

Пытается вызвать класс компонента GlobalHeader из отдельного файла.
Проблема такова, что она не будет отображаться всякий раз, когда она находится в любом другом теге.

Я пробовал:

1. Добавление StyleSheet с flex: 1 к Container, Header и GlobalHeader
2. Удаление native-base компонентов и приклеить с react-native компонентов.
3. Toying вокруг с export default (Сомнение это проблема)
4. Замена ES6 import с NodeJS require
5. играть с GlobalHeader «ы структуры (Ввод контейнеров в нем и тому подобное)

I может успешно позвонить и сделать его здесь:

Если он находится в другом теге; да, я пробовал все виды тегов:

Ожидаемый результат (Да, я знаю, как исправить значки):

Код для Details.js:

import React, { Component } from 'react'; 
import { Container, Content, List, ListItem, Text, Header, Title, Button, Icon } from 'native-base'; 

import GlobalHeader from "../components/GlobalHeader"; 

export default class Details extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return (
     <Container> 
     <GlobalHeader /> 
     <Content> 
      <List dataArray={this.props.crate} 
       renderRow={(item) => 
        <ListItem> 
         <Text>{item}</Text> 
        </ListItem> 
       }> 
      </List> 
     </Content> 
     </Container> 

     // <GlobalHeader /> 
    ); 
    } 
} 

module.exports = Details; 

Код для GlobalHeader.js:

import React, { Component } from 'react'; 
import { Container, Content, List, ListItem, Text, Header, Title, Button, Icon } from 'native-base'; 

export default class GlobalHeader extends Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return (

     <Header> 
      <Button transparent> 
       <Icon name='ios-arrow-back' /> 
      </Button> 

      <Title>Header</Title> 

      <Button transparent> 
       <Icon name='ios-menu' /> 
      </Button> 
     </Header> 

    ); 
    } 
} 

module.exports = GlobalHeader; 

Помощь была бы очень признательна. Не меняйте маршруты/навигатор.
Только прочитайте о ES6, когда я столкнулся с этой проблемой, так что это может быть проблема ES6?

Answer 1

Глядя на вашем примере и родной базы docs:

• NativeBase предоставляет свой собственный компонент кадра, названный в честь.
• Все компоненты должны быть включены в контейнер.
• Контейнер занимает в основном три компонента: < Заголовок>, < Контент> и < Нижний колонтитул>.
• Контейнер поставляется с предопределенной таблицей стилей, с дополнительным преимуществом принятия пользовательских стилей.
• Использование компонента Контейнерного заголовка очень похоже на ваш HTML. Так и с Footer.
• Контентный компонент Контейнера - это не что иное, как раздел тела вашего экрана.

Но Контейнер Видит свой компонент как GlobalHeader, а не родной базы заголовка, поэтому он игнорирует его.

Сначала я подумал, что если вы перемещаете заголовок из GlobalHeader до компонента Подробности, это будет работать, но, к сожалению, родная база заголовок принимает только нативные базовый Баттон и Название:

• Заголовок принимает входные данные как: Button и Название

так что я не думаю, что это будет работать ..
Я имею в виду два варианта:

1. Код для вставки GlobalHeader в детали.
2. Если GlboalHeader простой компонент, без состояния, вы можете преобразовать его в функцию, которая возвращает заголовок следующим образом: (непроверенные)

GlobalHeader:

import React from 'react'; 
import { Container, Content, List, ListItem, Text, Header, Title, Button, Icon } from 'native-base'; 

export default function() {  
    return (
     <Header> 
      <Button transparent> 
       <Icon name='ios-arrow-back' /> 
      </Button> 

      <Title>Header</Title> 

      <Button transparent> 
       <Icon name='ios-menu' /> 
      </Button> 
     </Header> 
    ); 
} 

Детали:

import React, { Component } from 'react'; 
import { Container, Content, List, ListItem, Text, Header, Title, Button, Icon } from 'native-base'; 

import getGlobalHeader from "../components/GlobalHeader"; 

export default class Details extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return (
     <Container> 
     {getGlobalHeader()} 
     <Content> 
      <List dataArray={this.props.crate} 
       renderRow={(item) => 
        <ListItem> 
         <Text>{item}</Text> 
        </ListItem> 
       }> 
      </List> 
     </Content> 
     </Container> 
    ); 
    } 
} 

Answer 2

Это ответили, пожалуйста, here и номер ошибки #297

NativeBase на данный момент не поддерживает пользовательские компоненты.

И это быть исправлено с переписыванием NativeBase