FAB 在 React Native 中不工作

Question

import React, { Component } from 'react';
import { Container, Header, View, Button, Icon, Fab } from 'native-base';
export default class FABExample extends Component {
  constructor() {
    this.state = {
      active: 'true'
    };
  }
  render() {
    return (  
      <Container>
        <Header />
        <View style={{ flex: 1 }}>
          <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>
        </View>
      </Container>
    );
  }
}

我正在使用上面的代码在我的项目中添加一个 FAB。但我收到一个错误：

Body:{"type":"TransformError","snippet":" 3| constructor() { 4| this.state ......

Answer 1

这似乎是NativeBase给出的示例代码中的一个错误。为了更正错误，请在您的构造函数中添加 super();，如下所示。

constructor() {
  super();
  this.state = {
    active: 'true'
  };
}

您可以参考此了解更多详细信息，为什么构造函数需要在访问 'this'

之前调用 super

FAB 在 React Native 中不工作

FAB not working in React Native

reactjs

floating-action-button

react-native