ReactNative - 组件在任何其他标签内时不呈现 | NativeBase 自定义组件

Question

正在尝试从单独的文件中调用组件 class GlobalHeader。
问题是，它不会在任何其他标签中显示。

我试过：

将 StyleSheet 和 flex: 1 添加到 Container、Header 和 GlobalHeader
删除 native-base 组件并坚持使用 react-native 组件。
摆弄export default（怀疑是这个问题）
用 NodeJS 替换 ES6 import require
玩转 GlobalHeader 的结构（将容器放入其中等）

我这里可以成功调用渲染：

如果它在另一个标签中；是的，我试过各种标签：

预期输出（是的，我知道如何修复图标）：

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;

非常感谢您的帮助。不改变我的 routes/navigator。
当我遇到这个问题时才阅读 ES6 所以它可能是 ES6 问题？

Answer 1

查看您的示例和 native-base docs:

NativeBase provides its own frame component, named after .

All the components should be included within the Container.

Container takes mainly three components: < Header>, < Content> and < Footer>.

Container comes with its predefined stylesheet, with an added advantage of accepting user-defined styles.

Usage of Container's Header component is very similar to your HTML . So is with Footer.

The Content component of Container is nothing but the body section of your screen.

但容器将您的组件视为全局Header，而不是native-base Header，因此它会忽略它。

起初我认为如果将 Header 从 GlobalHeader 移到 Details 组件中，这会起作用，但不幸的是，native-base Header 只接受 native-base 按钮和标题：

Header takes input as: Button and Title

所以我认为这行不通..
我在考虑两种选择：

将全局Header嵌入到详细信息中。
如果 GlboalHeader 是一个简单的没有状态的组件，你可以把它转换成一个函数 returns Header 像这样：（未测试）

全球Header：

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

已回复，请查看 and Issue #297

NativeBase 目前不支持自定义组件。

这将通过重写 NativeBase 来解决

ReactNative - 组件在任何其他标签内时不呈现 | NativeBase 自定义组件

ReactNative - Component not rendering when it's inside any other tag | NativeBase Custom Components

react-jsx

react-native

es6-class

react-native-android

native-base