Fab（NativeBase）组件内的自定义组件未呈现

Question

我无法解决的NativeBase组件有问题。

我正在使用NativeBase的FAB组件，现在这是文档示例中建议的结构：

 <Fab
     active={this.state.active}
     direction="up"
     containerStyle={{ }}
     style={{ backgroundColor: '#5067FF' }}
     position="bottomRight"
     onPress={() => this.setState({ active: !this.state.active })}>
        <Icon name="share" />
        <Button style={{ backgroundColor: '#34A34F' }}>
          <Icon name="logo-whatsapp" />
        </Button>
        <Button style={{ backgroundColor: '#3B5998' }}>
          <Icon name="logo-facebook" />
        </Button>
        <Button disabled style={{ backgroundColor: '#DD5144' }}>
          <Icon name="mail" />
        </Button>
</Fab>

我已经创建了代表各个按钮的内部组件：

const FabButton = props => {
   return ( // tried inserting a breakpoint here
       <Button>
           <Icon name={props.icon} />
       </Button>
   );
}

export default FabButton;

然后我尝试同时插入一个自定义组件和一个遵守文档的组件，然后我只能看到其中一个（遵循文档的组件）：

<Fab
   active={this.state.active}
   direction="down"
   position="topRight"
   onPress={() => this.setState({ active: !this.state.active })}>
      <Icon name="filter" />

      // doc-like(correctly rendered)
      <Button>
         <Icon name="trash" />
      </Button>

      // custom component(incorrectly rendered)
      <FabButton icon="trash" />

</Fab>

为什么？使用我的组件或其他组件有什么区别？

我还尝试过在调试模式下插入断点，并且似乎自定义组件均未呈现。