React native ReactNative-组件在'；s位于任何其他标记| NativeBase自定义组件内

试图从单独的文件调用组件类

GlobalHeader

问题是，它在任何其他标记中都不会显示

我试过：

将带有

flex:1的
样式表添加到
容器
，
标题

和
GlobalHeader

移除

native base

组件并坚持使用

react native

组成部分

玩弄

导出默认值

（怀疑这是问题所在）

将ES6

import

替换为NodeJS

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;

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问题？

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

• NativeBase提供自己的框架组件，以名称命名
• 所有组件都应包含在容器内
• 容器主要包含三个组件：
  、和
• 容器附带预定义的样式表，还有接受用户定义样式的额外优势
• 容器头组件的用法与HTML非常相似。页脚也是如此
• 容器的内容组件只是屏幕的主体部分

但是容器将您的组件视为GlobalHeader，而不是本机基头，因此它会忽略它

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

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

所以我认为这行不通。
我想有两种选择：

将GlobalHeader嵌入到详细信息中

如果GlboalHeader是一个简单的 没有状态的组件，可以将其转换为 返回标题，如下所示：（未测试）

全局标题：

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

从“React”导入React；
从“本机基础”导入{容器、内容、列表、列表项、文本、标题、标题、按钮、图标}；
导出默认函数（）{
返回(
标题
);
}

详情：

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

import React，{Component}来自'React'；
从“本机基础”导入{容器、内容、列表、列表项、文本、标题、标题、按钮、图标}；
从“./components/GlobalHeader”导入getGlobalHeader；
导出默认类详细信息扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{getGlobalHeader（）}
{item}
}>
);
}
}

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

• NativeBase提供自己的框架组件，以名称命名
• 所有组件都应包含在容器内
• 容器主要包含三个组件：
  、和
• 容器附带预定义的样式表，还有接受用户定义样式的额外优势
• 容器头组件的用法与HTML非常相似。页脚也是如此
• 容器的内容组件只是屏幕的主体部分

但是容器将您的组件视为GlobalHeader，而不是本机基头，因此它会忽略它

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

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

所以我认为这行不通。
我想有两种选择：

将GlobalHeader嵌入到详细信息中

如果GlboalHeader是一个简单的 没有状态的组件，可以将其转换为 返回标题，如下所示：（未测试）

全局标题：

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

从“React”导入React；
从“本机基础”导入{容器、内容、列表、列表项、文本、标题、标题、按钮、图标}；
导出默认函数（）{
返回(
标题
);
}

详情：

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

import React，{Component}来自'React'；
从“本机基础”导入{容器、内容、列表、列表项、文本、标题、标题、按钮、图标}；
从“./components/GlobalHeader”导入getGlobalHeader；
导出默认类详细信息扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{getGlobalHeader（）}
{item}
}>
);
}
}

此问题已得到解答，请检查并发布

到目前为止，NativeBase不支持自定义组件

---

此问题将通过重写NativeBase来解决

此问题已得到回答，请检查并发布

到目前为止，NativeBase不支持自定义组件

---

这将通过重写NativeBase来解决

您是否尝试过从“./components/GlobalHeader”导入{GlobalHeader}”？用{}包装GlobalHeader