Question

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

我试过了：

将StyleSheet flex: 1添加到Container，Header 和GlobalHeader
删除native-base个组件并坚持使用react-native 组件。
与export default一起玩弄（怀疑这是问题）
用NodeJS 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;

非常感谢帮助。不改变我的路线/导航器。
我遇到这个问题时只阅读ES6，这可能是ES6问题吗？

Answer 1

查看您的示例和原生基地docs：

NativeBase提供自己的框架组件，以。
命名
所有组件都应包含在Container中。

容器主要包含三个组件：＆lt;标题＆gt;，＆lt;内容和GT;和＆lt;页脚＆GT;

Container附带预定义的样式表，并具有接受用户定义样式的附加优势。

Container的Header组件的用法与您的HTML非常相似。 Footer也是如此。

Container的Content组件只是屏幕的正文部分。

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

起初我认为如果你将Header从GlobalHeader移到Details组件，这会有效，但遗憾的是，native-base Header只接受基于本地的Button和Title：



标题输入为：按钮和标题


所以我认为这不会起作用。
我想到两个选择：

将GlobalHeader嵌入详细信息。

如果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

来解决的

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

2 个答案: