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

Question

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

我试过了：

1. 将StyleSheetwith添加flex: 1到Container,Header 和GlobalHeader
2. 卸下native-base组件并粘上react-native 组件。
3. 玩弄export default（怀疑这是问题所在）
4. import用 NodeJS替换 ES6require
5. 玩弄GlobalHeader's 结构（将容器放入其中等）

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

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

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

代码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

查看您的示例和本机基础文档：

• NativeBase 提供了自己的框架组件，以 .
• 所有组件都应包含在容器中。
• Container主要包含三个组件：<Header>、<Content>和<Footer>。
• Container 带有其预定义的样式表，具有接受用户定义样式的额外优势。
• Container 的 Header 组件的用法与您的 HTML 非常相似。页脚也是如此。
• Container 的 Content 组件只不过是屏幕的主体部分。

但是 Container 将您的组件视为 GlobalHeader，而不是本机基础 Header，因此它会忽略它。

起初我以为如果将 Header 从 GlobalHeader 移到 Details 组件，这会起作用，但不幸的是，native-base Header 只接受 native-base Button 和 Title：

• 标题将输入作为：按钮和标题

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

1. 将 GlobalHeader 嵌入到详细信息中。
2. 如果 GlboalHeader 是一个没有状态的简单组件，您可以将其转换为返回 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

已回答，请在此处查看问题#297

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

这将通过重写 NativeBase 来解决