React-Native - 문제가있는 버튼으로 표시

Question

나는 입니다.은 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> 
    ); 
    } 
} 

버튼 "대시 보드"의 오른쪽에 있어야한다.

나는 그것이 스타일링과 관련이 있다고 생각합니까? 최신 NativeBase Header.js 라인 77 이후, 타입 검사가 자식을 수행하고 렌더링됩니다 만 다음과 같은 구성 요소에서

Answer 1

: <Button>, <Title>, <Subtitle>, <InputGroup>.

심지어 <Button> 구성 요소를 반환하는 경우에도 해당 유형으로 인해 무시됩니다.