Пользовательский компонент внутри компонента Fab (NativeBase) не отображается - PullRequest
Новая
       28

Пользовательский компонент внутри компонента Fab (NativeBase) не отображается

0 голосов
/ 20 декабря 2018

У меня проблема с компонентом NativeBase, которую я не могу разрешить.

Я использую компонент FAB NativeBase, теперь это структура, предложенная в примере документации: 

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

почему?В чем разница между использованием моего компонента или другого?

Я также пытался перейти в режим отладки, вставляя точку останова, и кажется, что пользовательский компонент не отображается.

...