React-Native - 按钮显示问题答案

【问题标题】：React-Native - Issue with button showingReact-Native - 按钮显示问题
【发布时间】：2017-01-13 07:11:53
【问题描述】：

我是react-native 的非常新手，所以我只是想通过用户指南偶然发现并尝试解决问题。

我无法显示我认为我做得正确的按钮。寻找一些关于它为什么没有出现的建议。

注销按钮组件：

import React from 'react';
import { Button, Icon } from 'native-base';

// Create our logout button
const LogoutButton = ({ children, buttonStyle, onPress, icon, text }) => {

  return (
    <Button onPress={onPress} style={buttonStyle}>
      <Icon name={icon} />
      {text}
    </Button>
  );

};

export { LogoutButton };

用户面板：

import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon, Text } from 'native-base';
import firebase from 'firebase';
import { LogoutButton } from './common';


export default class UserPanel extends Component {
render() {
    return (
        <Container>
            <Header>
            <Button transparent>
                <Icon name='ios-menu' />
            </Button>
                <Title>Dashboard</Title>
                <LogoutButton text="Logout" icon="ios-home" style={styles.logout} onPress={() => firebase.auth().signOut()} />
            </Header>
        </Container>
    );
  }
}

按钮应位于“仪表板”的右侧。

我猜它与样式有关？

【问题讨论】：

尝试设置其中一些组件的backgroundColor，这通常有助于可视化，有时它们会神奇地出现。

标签： react-native flexbox react-jsx

【解决方案1】：

在最新的 NativeBase Header.js 第 77 行以后，将对其子级执行类型检查并仅渲染以下组件：<Button>、<Title>、<Subtitle>、<InputGroup>。

即使 <LogoutButton> 正在返回 <Button> 组件，由于它的类型，它仍然会被忽略。

【讨论】：